Tag: chart.js

将react.js与chart.js一起使用时，获取“TypeError：document.getElementById（…）为null”: 我正在使用react和chart.js来绘制条形图。但是在chart.js中我们必须使用canvas标签并找到该标签并在其中放置条形图，我们使用普通的document.getElementById()方法。我尝试了很多组合，比如把document.getElementById()放在开头，或放在$(document).ready() ，甚至在react的componentDidMount()方法中。但我仍然得到“ TypeError: document.getElementById(…) is null ”。如果有人知道，请给我一个建议。谢谢。这是我试图执行的代码： var React = require(“react”); var Chart = React.createClass({ getDefaultProps: function() { barChartData = { labels : [“Option1”, “Option2”], datasets : [ { fillColor : “rgba(220,220,220,0.5)”, strokeColor : “rgba(220,220,220,0.8)”, highlightFill: “rgba(220,220,220,0.75)”, highlightStroke: “rgba(220,220,220,1)”, data : [65, 35] } ] } }, onload: function() […]

Chart.js只是随机出现，并在页面刷新时消失: 试图使用chart.js，但我遇到了一个问题，图表将加载….有时。其他时候它没有，它在页面刷新时消失。有任何想法吗？这是在Chrome和Safari中测试的。 $.getJSON(‘includes/salesjson.php’, function(data){ var lineChartData = { labels : data[0], datasets : [ { label: “My First dataset”, fillColor : “rgba(220,220,220,0.2)”, strokeColor : “rgba(220,220,220,1)”, pointColor : “rgba(220,220,220,1)”, pointStrokeColor : “#fff”, pointHighlightFill : “#fff”, pointHighlightStroke : “rgba(220,220,220,1)”, data : data[1] } ] } window.onload = function(){ var ctx = document.getElementById(“myChart”).getContext(“2d”); window.myLine = new […]

ChartJS onclick填充区域（雷达图）: 我正在尝试在JQuery中创建一个函数来增加和减少点击的点数。我已经设法创建了增加点数的onclick事件，但无法弄清楚如何减少它。 $(“#radarChart”).click( function (evt) { var activePoints = myRadarChart.getPointsAtEvent(evt); var Values = activePoints[0].label + ‘ = ‘ + activePoints[0].value; activePoints[0].value++; } ); 上面的函数在点击时增加了一个点的值，为了减少它，我需要知道是否点击了填充区域。我查看了ChartJS文档并没有遇到它。其他图表确实有它，例如Polar Area Chart，当你hover一个部分时，它突出显示，这意味着有一个function可以检测鼠标hover在段上。雷达图表中是否存在类似的function？我的代码。如果没有，任何关于如何实现这一点的想法，将不胜感激。我能想到的唯一选择是创建10个按钮，5个标签。按钮将是+和 – ，增加和减少标签。这在我看来需要太多空间，所以我试图避免它。谢谢，

数组在Chartjs中无法正常工作: 我正在使用PHP（版本7），JQuery和ChartJS与我的外部ERP（Tally.ERP9）进行数据集成项目。我从Tally.ERP9通过ODBC提取数据并将行作为数组提取。我还使用下面的代码将PHP数组变量转换为JavaScript数组变量 var test = ”; var test2 = ”; 然后我在JavaScript中调用变量，如下所示， $(document).ready(function(){ var ctx = $(“#pie-container”).get(0).getContext(“2d”); alert(test); alert(test2); var data = { labels : test, datasets: [ { label: “My First dataset”, fill: true, lineTension: 0.1, backgroundColor: “rgba(75,192,192,0.4)”, borderColor: “rgba(75,192,192,1)”, borderCapStyle: ‘butt’, borderDash: [], borderDashOffset: 0.0, borderJoinStyle: ‘miter’, pointBorderColor: “rgba(75,192,192,1)”, pointBackgroundColor: “#fff”, pointBorderWidth: 1, […]

在同一图表中添加2个信息范围（chart.js）: 我使用chart.js（2.5版本）创建了一个线型图表，与此示例完全相同： http ：//codepen.io/SitePoint/pen/WGZGNE Chart.js — Line Chart Demo .container { width: 80%; margin: 15px auto; } https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js var ctx = document.getElementById(‘myChart’).getContext(‘2d’); var myChart = new Chart(ctx, { type: ‘line’, data: { labels: [‘M’, ‘T’, ‘W’, ‘T’, ‘F’, ‘S’, ‘S’], datasets: [{ label: ‘apples’, data: [12, 19, 3, 17, 6, 3, 7], backgroundColor: “rgba(153,255,51,0.6)” }, { […]

Chart.js没有在桌面上绘制移动（safari / chrome）: 我有一个在桌面上完美运行的饼图。它从AJAX请求中检索数据并存储它获得的数据/ json。然后将所选数据推入图表。我正在使用Thymeleaf＆Spring，但我认为这与此无关。当我通过Safari或Chrome在移动设备上访问它时，我的页面上的所有内容都会正常呈现，但图表不存在。我已尝试更改响应式true / false，维护AspectRatio false / true，使用chart.js文档中提供的其他选项。更改了视口，在canvas的容器上设置我的宽度，而不是自己的canvas和一大堆其他东西。可能是由于加载顺序？即页面是否可以实际从请求中获取信息之前加载？但是，这意味着它也不应该在桌面上工作。这是一些代码 myGraph.js $(document).ready(function () { var id = $.url(2); $.ajax({ url: “hosturl/a/b/” + id + “/c/d”, type: “GET”, dataType: “json”, success: function (data) { console.log(data); var count = []; var days = []; for (var i in data) { […]

如何使用ChartJS中的溢出滚动修复图表图例宽度 – 高度: 我想为我的项目创建饼图，所以我正在使用ChartJS，但是chartJS有一些问题，如果我使用10到20个数据字段，时间表看起来不错，但是当我申请更多时在一个图表中超过50到60个数据字段，因此该图表看起来更小而不是图例，并且如果有时数据字段太多而不是图表隐藏，则只能看到图例，图表消失了。我想将高度或宽度设置为该图例，如果有更多数据，还应用于滚动条。这是小提琴链接供您参考 https://jsfiddle.net/KDM1010/5um78rbk/ var ctx = document.getElementById(“myChart”).getContext(‘2d’); var myChart = new Chart(ctx, { type: ‘pie’, data: { labels: [“lable_1”, “lable_2”, “lable_3”, “lable_4”, “lable_5”, “lable_6”, “lable_7”, “lable_8”, “lable_9”, “lable_10”, “lable_11”, “lable_12”, “lable_13”, “lable_14”, “lable_15”, “lable_16”, “lable_17”, “lable_18”, “lable_19”, “lable_20”, “lable_21”, “lable_22”, “lable_23”, “lable_24”, “lable_25”, “lable_26”, “lable_27”, “lable_28”, “lable_29”, “lable_30”, “lable_31”, “lable_32”, “lable_33”, “lable_34”, “lable_35”, “lable_36”, […]

chart.js响应条形图标签大小: 所以我有一个使用chart.js的条形图，我启用了响应。它似乎适用于某些图表而不是其他图表。例如，我的条形图标签似乎没有重新调整窗口大小，但其他一切确实使整个图表在较小的窗口大小时看起来非常奇怪。如何重新调整标签大小以使其一起缩放？有任何想法吗？谢谢！我的小提琴： http ： //fiddle.jshell.net/SteveSerrano/e3o9z2wg/ HTML： JS： var barChartData = { labels: [“Adjust claims fairly”, “Pays promptly”, “Resolves issues quickly”, “Communicates clearly, honestly to agents”, “Underwriter knowledge/expirience”, “Listens, responds to agents”, “Consistant underwriting”, “Easy, intuitive functionality-technology”, “Stable underwriting market”, “Flexible underwriting when warrented”], datasets: [ { label: “My First dataset”, […]

JavaScript – Chart.js工具提示显示错误的x轴值: 我有一个包含两个不同数据集的图表，但有时它们具有相同的x，y坐标。但是当我hover共享点时，它有时会显示错误的日期。 y值是正确的，但它是未正确显示的x值。尝试在codepen上hover共享点。在下图中，您可以看到我正在徘徊{ y: 56.04, x: April 05, 2014 } ，但显示xLabel值为58.28 ，即April 15, 2012 。此外，您可以在图表中看到57.05和58.28都将April 15, 2012作为x值，但它们不在同一个y位置！代码太长，无法在stackoverflow上共享，但我创建了这个codepen，因此您可以在那里查看，分叉和编辑它。更新我更新了具有相同日期的笔和固定点。我还添加了type: ‘time’感谢@Oluwafemi Sule 。这是我编辑过的笔。但是现在，x轴上的日期很奇怪。他们不再说March 06, 2011 ，但他们说Q1 2011 。工具提示仍然存在问题。

如何禁用ChartJS中特定数据集的工具提示: 我显示了一个包含两种类型的图表。现在我想隐藏一个数据集的工具栏。我在GitHub上看到了类似的讨论，但这并没有让我更进一步。这是我的图表的一个例子： Chart.defaults.global.legend.display = false; var ctx = document.getElementById(“chart”).getContext(“2d”); var data = { labels: [“Januar”,”Februar”,”März”,”April”,”Mai”,”Juni”,”Juli”,”August”,”September”,”Oktober”,”November”,”Dezember”], datasets: [ { label: “Test”, type: ‘bar’, backgroundColor: “#F29220”, borderColor: “#F29220”, data: [4,1,1,2,2,2,2,2,2,2,2,1] }, { label: “Test2”, type: ‘bar’, backgroundColor: “#F29220”, borderColor: “#F29220”, data: [4,0,0,0,0,0,0,0,0,0,0,0] }, { label: “”, type: ‘line’, fillColor: “rgba(220,220,220,0)”, pointColor: “rgba(220,220,220,0)”, borderColor: “#FF0000”, tooltip: […]