chart.js

问题 i would like to use a strokeshadow for my line chart. But every solution that i found works only with chartjs v1. Is their any solution for the newest one? thats what i designed with chartjs v1, but just like i said, i found no way to do it with version 2. jsfiddle Chart.types.Line.extend({ name: "LineAlt", initialize: function () { Chart.types.Line.prototype.initialize.apply(this, arguments); var ctx = this.chart.ctx; var originalStroke = ctx.stroke; ctx.stroke = function () { ctx.save();

问题 I saw other libraries support this but there is very little data for Chart.js. Can anybody indicate me the way to start with a regression line for my graph? This is my code so far: var datiedu3 = {"labels": ['ok'], "datasets": [{label: 'EEE', data: datoa , backgroundColor: 'rgb(255, 99, 132)', borderWidth: 1, showLine: false}] }; function grafo2(dati, opzioni) { var grafoline = document.getElementById('Chartline').getContext('2d'); new Chart(grafoline, {type: 'scatter',data: dati, options:

问题 I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image Although I am able to make it by drawing two line in this example var ctx = document.querySelector("#myChart").getContext('2d'); Chart.pluginService.register({ afterDraw: function(chart) { if (typeof chart.config.options.lineAt != 'undefined') { var lineAt = chart.config.options.lineAt; var ctxPlugin = chart.chart.ctx; var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id]; ctxPlugin

问题 I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image Although I am able to make it by drawing two line in this example var ctx = document.querySelector("#myChart").getContext('2d'); Chart.pluginService.register({ afterDraw: function(chart) { if (typeof chart.config.options.lineAt != 'undefined') { var lineAt = chart.config.options.lineAt; var ctxPlugin = chart.chart.ctx; var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id]; ctxPlugin

问题 I have to many points on my chart so when I am clicking through on mobile or small screen my tooltip just showing data from multiple points: I researched on that and find out the the best approach would be is to disable the tooltip on small screens. I tried to follow this advice from the docs. But have no luck: options: { // This chart will not respond to mousemove, etc events: ['click'] } Also I found that but I think it is actually related to what I just did based on the advice form the

问题 I have this chart setup: const data = [{ name: "series1", series: [{ date: "2016-01-31T00:00:00.000Z", value: 8 }, { date: "2016-02-28T00:00:00.000Z", value: 10 }, { date: "2016-03-30T00:00:00.000Z", value: 12 }, { date: "2016-04-31T00:00:00.000Z", value: 15 }, { date: "2016-05-31T00:00:00.000Z", value: 14 }, { date: "2016-06-30T00:00:00.000Z", value: 16 }, { date: "2016-07-31T00:00:00.000Z", value: 17 } ] }, { name: "series2", series: [{ date: "2016-01-31T00:00:00.000Z", value: 5 }, { date:

问题 I just added tooltips: { mode: 'index', intersect: true } to this particular chart setup The problem is that tooltip drops always in the wrong place So I am hovering on a particular point on the chart but tooltip displays in completely different spot. Any ideas how to fix? 回答1: From the sample code you provided in your comment to my first answer, I see that the values of your datasets don't start at the same x-position. Therefore mode: 'index' doesn't work and you should use mode: 'x' instead

问题 I am creating a scatter chart using chartJS and trying to draw lines between max value and average value, min value and average value. I have used chartjs-plugin-annotation.js to draw line. I have passed value and endvalue in options (annotation configuration) to draw line height in chartJS. But I want I have tried var ctx = document.getElementById('myCanvas').getContext('2d'); var myChart1 = new Chart(ctx, { type: 'scatter', plugins: [ChartAnnotation,ChartDataLabels], data: { datasets: [{

问题 I'm using Chart.js (documentation), but there doesn't seem to be an option to set the animation speed . I can't even seem to find an animation speed / time variable in the source code. How do I go about doing this? (ps: I'm using Doughnut charts) EDIT : Changing animationSteps , shows weird artefacts after the animation is complete, for several values (ie: 30 or 75). 60 is working fine. And it doesn't only appear with 100+ values of the chart: 回答1: I love Chart.js, but this is definitely a

问题 I had to parse the scientific notation that was a result of implementing logarithmic scale to my graph but it printed out each value for each line in the graph. No method of steps seems to be working. RESULTING CHART IMG var packetsElement = $("#packetsGraph"); pckBarChart = new Chart(packetsElement, { type: 'bar', data: { labels: ["Received", "Errors", "Lost"], datasets: [{ label: '# of Packets', data: packetsArr, backgroundColor: [ 'rgba(55,102,245,0.3)', 'rgba(55,102,245,0.2)', 'rgba(55