chart.js是否有办法根据值给折线图刻度线着色

Question

I have simple chart.js line chart:

I need to color lines between ticks, depending on previous value like that:

If next value is lower than prev line must be red, if higher color is green.

Any ideas how to achieve this?

Answer 1

You can check the following solution.

 var ctx = document.getElementById('myChart').getContext('2d'); //adding custom chart type Chart.defaults.multicolorLine = Chart.defaults.line; Chart.controllers.multicolorLine = Chart.controllers.line.extend({ draw: function(ease) { var startIndex = 0, meta = this.getMeta(), points = meta.data || [], colors = this.getDataset().colors, area = this.chart.chartArea, originalDatasets = meta.dataset._children .filter(function(data) { return !isNaN(data._view.y); }); function _setColor(newColor, meta) { meta.dataset._view.borderColor = newColor; } if (!colors) { Chart.controllers.line.prototype.draw.call(this, ease); return; } for (var i = 2; i <= colors.length; i++) { if (colors[i-1] !== colors[i]) { _setColor(colors[i-1], meta); meta.dataset._children = originalDatasets.slice(startIndex, i); meta.dataset.draw(); startIndex = i - 1; } } meta.dataset._children = originalDatasets.slice(startIndex); meta.dataset.draw(); meta.dataset._children = originalDatasets; points.forEach(function(point) { point.draw(area); }); } }); // build colors sequence const data = [0, 10, 5, 2, 20, 30, 45]; const availableColors = ['red', 'green']; let colors = []; data.forEach(item => { availableColors.forEach(color => { colors.push(color) }) }) var chart = new Chart(ctx, { // The type of chart we want to create type: 'multicolorLine', // The data for our dataset data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", borderColor: 'rgb(255, 99, 132)', data: data, //first color is not important colors: ['', ...colors] }] }, // Configuration options go here options: {} }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> <canvas id="myChart"></canvas>