chart.js2

问题 I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want: The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, but I can't find anything about hiding those "Grid Lines". How can I remove the grid lines? 回答1: I found a solution that works for hiding the grid lines in a Line chart. Set the gridLines color to be the same as the div's background color. var options = { scales: { xAxes: [{

问题 I want to change the font to something snazzier in my Chart.JS horizontal bar chart. I've tried the following, but none of it works: var optionsBar = { . . . //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara'" label: { font: { family: "Georgia" } } }; I also read that this would work: Chart.defaults.global.defaultFont = "Georgia" ...but where would this code go, and how exactly should it look? I

问题 I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas? 回答1: Unfortunately, since there is no config option to handle this the only way you

问题 I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas? 回答1: Unfortunately, since there is no config option to handle this the only way you

问题 First of all, I apologize if my question is a slightly the same as others question. I searched for a solution and found 3 similar questions, yet none of them worked in my case, because the examples I found use Chart.js v1. I saw a sample using a function placed in scaleLabel to format the numbers just like this: var options = { animation: false, scaleLabel: function(label){ return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } }; The above code, however, doesn't work

问题 I have this graph: I'm using linearGradient to color the areas between the lines. I'm calculating the cutting point's x, and then calculating the offset for addColorStop(offset, color) of the gradient. When setting the tension property to 0 , (which means straight lines) the graph gets colored as expected. Problem is, that when I set tension to be 0.5 I get the following result: The reason for that is that the tension is calculated by Bezier Curve, which changes the equation I use to

问题 According to the Chart.js docs, the following code should work: new Chart(document.getElementById(chartID), { type: 'pie', responsive: true, maintainAspectRatio: false, data: { labels: graph.globals.labels, datasets: [{ backgroundColor: pieOptions.backgrounds, data: pieOptions.objToArr(graph.meetingsData), hoverBorderWidth: 5, borderColor: 'transparent', }] }, options: { title: { display: true, text: graph.globals.title, }, legend: { display: true, position: 'bottom', fullWidth: false,

问题 I am trying to show multiple types of charts by giving user the option to select the type of chart he/she is interested in viewing. User can select the type of chart from the following HTML radio group code. <form> <label class="radio-inline"> <input type="radio" value="bar" name="optradio" (change)="onchange()" [(ngModel)]="chartType" checked>Bar Graph </label> <label class="radio-inline"> <input type="radio" value="pie" name="optradio" (change)="onchange()" [(ngModel)]="chartType">Pie Chart

问题 I wish to pass values of an array to the data and label fields of the chart.js dataset. Here the code from success of ajax call made to fetch json data. I fetch the json data and store it into an array. Data = jQuery.parseJSON(result); var count = Data.length; var counter = 0; while(count > 0) { LabelResult[counter] =[Data[counter].TIME]; counter++; count --; } Now i wish to use this label values into the labels filed. var myChart = new Chart(ctx, { type: 'bar', data: { labels: [LabelResult],

问题 So I have a chart.js chart with two series. One is a bar chart and the other is a line graph. S1 = 71,166,2,6,8 S2 = 6,2,4,8,5 When I plot them, they both appear on their own scales which makes the bar and line graphs kinda pointless. I need a way to plot both charts on the same scale. Is there a way to do this within chart.js? If not, how would you do it? thanks. var barChartData = { labels: dataLabels, datasets: [{ type: 'bar', label: "Actual", data: dataActual, fill: false, backgroundColor