Tag: chart.js

如何禁用chartjs legendclick: 我想禁用chart.js蜘蛛图表图例点击，因为当我点击图例时，数据系列隐藏了相关的值集，如下图所示。我的要求是我不想禁用数据集。我试过了preventDefault（）; 在图表上单击但它不起作用。我的代码示例附在下面。请检查.. Radar Chart var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return ‘rgba(‘ + randomColorFactor() + ‘,’ + randomColorFactor() + ‘,’ + randomColorFactor() + ‘,’ + (opacity || ‘.3’) + ‘)’; }; var […]

如何为chart.js线图动态创建数据集？: 我想在chart.js库中动态创建包含多个数据集的折线图。我能够动态分配数据。但我想动态创建数据集本身。我看到下面的链接：如何从chart.js的html表中动态添加元素并试过这个： var datasetValue = []; for (var j = 0; j < count; j++) { datasetValue[j] = [ { fillColor: 'rgba(220,220,220,0.5)', strokeColor :'rgba(220,220,220,1)' , title :'2013', data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10] }] } var mydata = { datasets : datasetValue } 这里的计数值是3，我想在图表中显示3行，计数值会有所不同。即使图表线颜色和标题相同，我想先显示该行，并在解决后更改其余部分。我试图像这样访问数据： alert(“Datasets:”+mydata.datasets[0].data); 它应该显示第一个数据集的数据，但它显示undefined 。但是在下面的情况中： […]

未捕获的TypeError：无法读取undefined – chart.js的属性’offsetWidth’: 我有这个简单的HTML：这个js： var ctx = document.getElementById(“myChart”); var myChart = new Chart(ctx, { type: ‘bar’, data: { labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”], datasets: [{ label: ‘# of Votes’, data: [12, 19, 3, 5, 2, 3], backgroundColor: [ ‘rgba(255, 99, 132, 0.2)’, ‘rgba(54, 162, 235, 0.2)’, ‘rgba(255, 206, 86, 0.2)’, ‘rgba(75, 192, 192, 0.2)’, ‘rgba(153, […]

ChartJs折线图在重叠时重新出现毛刺: 我有以下代码利用ChartJS库。 /*assume the tags in the right place */ var ctx = $(“#graph1”).get(0).getContext(“2d”); var myChart = new Chart(ctx).Line(graph1Generator(“day”)); …一切正常，但在添加以下事件处理程序以清除并重新绘制具有不同数据的相同图表后，会出现故障。 weekButton.addEventListener(“click”, function(){ ctx.clearRect (0, 0, 300, 300); ctx.canvas.width = 300; ctx.canvas.height = 300; myChart = new Chart(ctx).Line(graph1Generator(“week”)); 这段代码确实使用新数据成功地重绘了图表，但是当我将鼠标hover在它上面时，它会对它应该清除的旧图表做一些非常奇怪的“闪回”。这让我相信它并没有清除旧的。

将外部JSON加载到ChartJs中: 我是一个新手，当使用库来绘制JavaScript中的图表/我刚开始尝试使用Chartjs时，我一直无法使用getJson或其他任何东西来加载我的json对象并替换标签和数据。我之前使用过HighCharts，与此相比非常简单。另外，我如何将它放入Angular中的指令并显示它。 https://jsfiddle.net/0u9Lpttx/1/ 的index.html data.json [ { “timestamp”: “Monday”, “original_tweet”: “756”, “retweets”: “345”, “shared”: “34”, “quoted”: “14” }, { “timestamp”: “Tuesday”, “original_tweet”: “756”, “retweets”: “345”, “shared”: “34”, “quoted”: “14” }, { “timestamp”: “Wednesday”, “original_tweet”: “756”, “retweets”: “345”, “shared”: “34”, “quoted”: “14” } ] chartJsControl.js var test = []; $.getJSON(“data.json”, function (json) { test.push(json[i].timestamp); }); […]

Chart.js – 造型图例: 我正在用chart.js创建一个图表，我正在试图弄清楚如何更改标签/图例样式。我想删除矩形部分，而是使用圆圈。我已经读过你可以制作你的自定义图例（使用legendCallback），但对于我的生活，我无法弄清楚如何做到这一点。这就是我的图表现在的样子 – 图像。这是我的HTML：这是我的JS： var ctx = document.getElementById(“myChart”); var myChart = new Chart(ctx, { type: ‘line’, data: { labels: [“Red”, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”], datasets: [{ label: ‘Link One’, data: [1, 2, 3, 2, 1, 1.5, 1], backgroundColor: [ ‘#D3E4F3’ ], borderColor: [ ‘#D3E4F3’, ‘rgba(54, 162, 235, 1)’, ‘rgba(255, […]

如何设置ChartJS x轴标题: 我们使用Chartjs来绘制图表，但是没有给出x轴标题，这里有y轴标题的解决方案，但是对于x轴我可以添加x轴名称但是无法创建使用y作为this.chart.height将文本与x轴标题重叠，在图表下方的空间正确放置它。我看过chartjs v2.0，但它也不支持x-Axis标题。

图表区域背景颜色chartjs: 我有图表js的问题，我想像上面的图像着色图表区域我试图从charJs Docs中找到配置，但没有匹配。它是否可以改变图表区域的背景颜色？如果可能，任何人都可以帮助我 HTML 使用Javascript var ctx = document.getElementById(“barChart”); var barChart = new Chart(ctx,{ type: ‘bar’, data: { labels:[“Label1″,”Label2″,”Label3″,”Label4”], borderColor : “#fffff”, datasets: [ { data: [“2″,”3″,”1″,”4”], borderColor : “#fff”, borderWidth : “3”, hoverBorderColor : “#000”, backgroundColor: [ “#f38b4a”, “#56d798”, “#ff8397”, “#6970d5” ], hoverBackgroundColor: [ “#f38b4a”, “#56d798”, “#ff8397”, “#6970d5” ] }] }, options: […]

使用ajax数据绘制Chart.js并响应。一些问题和疑问: 我正在使用Chart.js（ http://www.chartjs.org/docs/ ）进行制图。我需要从Ajax请求和图表中获取数据以便响应。在我的HTML代码中，我添加了一个canvas，如下所示：在我的javascript（JQuery）代码中，我有： var data2; $.ajax({ url: $(‘#userscreated’).data(‘url’), async: true, dataType: ‘json’, type: “get”, }).done(function (data) { data2 = data; // Draw chart var context = $(‘#userscreated’).get(0).getContext(“2d”); var wrapper = $(‘#userscreated’).parent(); var width = $(‘#userscreated’).attr(‘width’, $(wrapper).width()); new Chart(context).Line( { labels: data.Dates, datasets: [ { fillColor: #404040, data: data.Users } ] }, { […]

如何为Bar Chart.js v2创建圆角条？: 试图在条形图上围绕条形图，如在此post中找到的那样工作，如提供的jsFiddle中所示。这是针对版本1的。在我使用的图表中，无法加载Chart.types.Bar.extend extend引用，导致脚本崩溃。如果我使用默认选项，图表不会加载任何问题。我必须将Chart.types.Bar.extend放在最后，以便正确加载默认选项。在全屏幕中运行并查看此内容。我尝试使用我的Chart.js 2.4.0版本实现这一点。 Chrome报告：未捕获的TypeError：无法读取未定义的chart.js的属性“extend” 此代码甚至不会在这里运行。为什么会这样？有人可以帮助我。此代码适用于旧版本的Chart.js 1.0。有谁可以请进一步展示如何使用版本Chart.js 2.0？谢谢。 $(document).ready(function(){ var myBarChart1 = new Chart($(‘#appBarChart2_NoRound’), { type: ‘bar’, data: dataBar2, options: optionsBar }); var ctx = $(“#appBarChart2”).getContext(“2d”); var myBarChart2 = new Chart(ctx).BarAlt(dataBarAlt2, { // 0 (flat) to 1 (more curvy) curvature: 1 }); }); […]