javascript - 两点之间的Chartjs线条颜色

Question

有没有办法在chart.js的两点之间设置特定部分的线条颜色？

我想为 00-07 部分着色灰色, 07-15红色和 15-23蓝色的。

这是我传递的 data options 中的属性初始化图表的对象:

var chartData = {
labels: [/* a single dimensional array of strings */],
datasets: [
    {
        label: '',
        data: [/* a single dimensional array of totals */],
        fill: false,
        backgroundColor: '#e7eaeb',
        borderColor: red
    }
  ]
};

我认为这是我需要添加图形部分点和颜色的地方，但我不知道如何。

Answer 1

嗨 Michael Hurley 我认为你应该使用:
插值 :
https://www.chartjs.org/docs/latest/samples/line/interpolation.html
或者
多轴 : https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
我的想法是我们有 3 个多色数据集，
dataset1 的结尾是 dataset2 的第一个。
这是我的例子:

window.chartColors = {  red: 'rgb(255, 99, 132)',   orange: 'rgb(255, 159, 64)',    yellow: 'rgb(255, 205, 86)',    green: 'rgb(75, 192, 192)',     blue: 'rgb(54, 162, 235)',  purple: 'rgb(153, 102, 255)',   grey: 'rgb(201, 203, 207)' }; 

var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };

        var config = {
            type: 'line',
            data: {
                labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                datasets: [{
                    label: 'Cubic interpolation (monotone)',
                    data: [0, 20, 20, 60, 60, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN],
                    borderColor: window.chartColors.red,
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fill: false,
                    cubicInterpolationMode: 'monotone'
                }, {
                    label: 'Cubic interpolation (default)',
                    data: [NaN, NaN, NaN, NaN, 60, 120, 140, 180, 120, NaN, NaN, NaN, NaN],
                    borderColor: window.chartColors.blue,
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fill: false,
                }, {
                    label: 'Linear interpolation',
                    data: [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 120, 125, 105, 110, 170],
                    borderColor: window.chartColors.green,
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fill: false,
                    lineTension: 0
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Cubic interpolation mode'
                },
                tooltips: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        },
                        ticks: {
                            suggestedMin: -10,
                            suggestedMax: 200,
                        }
                    }]
                }
            }
        };

    
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);

canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>