chart.js

问题 I am trying to create a multiline chart using Chart.js I can do this for 1 line and i can do 2 lines using a fixed data structure but I cannot get multiple lines to display data passed to the data structure. here is the example usage abbreviated from chart.js website http://www.chartjs.org/docs/#getting-started var myLineChart = new Chart(ctx).Line(data); var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ {fillColor: "rgba(220,220,220,0.2)",

问题 I need to get a chart like this: I find this example but it uses old version of ChartJs . I try it using v2.0 but I don't get it. Can someone post a example? 回答1: With v2.1.x, you can achieve this using the stacked option ... options: { scales:{ xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } } ... Stack Snippet var config = { type: 'bar', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ type: 'line', label: 'Dataset 2', data: [-65, -10,

问题 In chart.js how can I set the set the font size for just the x axis labels without touching global config? I've already tried setting the 'scaleFontSize' option my options object. I've also tried setting: { ... scales: { xAxes: [{ scaleFontSize: 40 ... }] } } 回答1: The fontSize attribute is actually in scales.xAxes.ticks and not in scales.xAxes as you thought. So you just have to edit the attribute like this : var options = { scales: { yAxes: [{ ticks: { fontSize: 40 } }] } } You can see a

问题 I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script. Is there any way to set the height of the graph from the script? See fiddle: Jsfidle HTML <div class="graph"> <div class="chart-legend"> </div> <div class="chart"> <canvas id="myChart"></canvas> </div> </div> JavaScript var ctx = $('#myChart'); ctx.height(500); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Red", "Blue",

问题 I have drawn a line chart using chart.js. For the labels and datasets i am getting values from the database. I am new to chart.js and its very powerful library, yet i am unable to completely understand it. I want to draw multiples horizontal lines. Like where if mean of dataset, standard deviation and min and max. I have tried the question here in stackoverflow but these are giving errors or may be i am not able to understand the working. This is my chart.js code function display_graph(id,

问题 Very strange, I have a Chart.js chart that I need to update dinamically. The update works fine, but if you move the mouse over the chart or click several times the button Update (Add data), the bars and the lines disappear and in the console shows this error: Uncaught TypeError: Cannot read property 'draw' of null Please click on the button several times, you can test it slowly or quickly. Pass the mouse over chart too after click the "Add data" button. You can test this at: https://jsfiddle

问题 I'm trying to always show tooltips for a multi dataset line chart in ChartJS The existing solutions only work for a single dataset (e.g. Chart.js - Doughnut show tooltips always?) like so: var options = { tooltipTemplate: "<%= value %>", onAnimationComplete: function() { this.showTooltip(this.segments, true); //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].bars, true); //Show tooltips in line chart (issue

问题 I am trying to render a chart (using ChartJS ) as express response. The data points for the chart are stored in node as array. I have to pass it on to the chartJS function. For that I'm currently using express's res.render() method. I have managed to pass the values to .pug file. Now i have to move the data points from .pug file to the .js file/ChartJS function. How do i accomplish this? is this is the correct approach? The end result I expect is that the array values stored in node has to be

问题 There are multiple charts on one page. Each chart line is common. I want to display a legend that is common to multiple charts like the figure.It shows and hides all chart lines with OnClick like the default legend. THIS PICT IS FAKE Is that possible? how? I had tried Chart.js sync legend toggle on multiple charts, One legend, multiple charts Chart JS and etc. But, those solutions have one chart with legend, and that legend affects other charts. Should I hide the chart and show only the

问题 I want to change the cursor when the mouse moves on the chart, something like this fiddle. This works with chart.js v2.4 but not works with v2.6 & v2.7 any idea? var ctx = document.getElementById("canvas1").getContext("2d"); var mychart = new Chart(ctx, { type: 'doughnut', data: { labels: ['uno', 'dos', 'tres', 'cuatro'], datasets: [{ data: [1, 2, 3, 4], backgroundColor: ["#BDC3C7","#9B59B6","#E74C3C","#26B99A"] }] }, options: { hover: { onHover: function(e) { $("#canvas1").css("cursor", e[0]