Chart.js разноцветные заливки разделов - PullRequest
Новая
       49

Chart.js разноцветные заливки разделов

0 голосов
/ 28 ноября 2018

У меня есть диаграмма, которая содержит синие или зеленые точки данных в зависимости от значения точки.

enter image description here

Можно ли изменить заливкуцвет под этими точками, чтобы отразить их значение?

enter image description here

Аналогично этому кодовому элементу https://codepen.io/jordanwillis/pen/BWxErp с использованием градиента переключения цветов между нимипод каждой точкой данных.

Ниже моя диаграмма переключения между цветными точками данных. 

var chartColors = {
    blue: 'rgb(54, 162, 235)',
    green: 'rgb(75, 192, 192)'
}


// x-axis labels
var chartData = {
    labels: ['1/1/2018', '2/1/2018', '3/1/2018', '4/1/2018', '5/1/2018', '6/1/2018', '7/1/2018'],
    datasets: [
    {label: 'Light',
    fill: true,

    borderColor: window.chartColors.blue,
    pointBackgroundColor: [],
    pointBorderColor: [],

    pointRadius: 10,
    pointHoverRadius: 10,

    data: data1},


    ]
};

window.onload = function() {
    var config = document.getElementById("canvas").getContext("2d");
    window.myLine = Chart.Line(config, {
        type: "line",
        data: chartData,
        options: {

            responsive: true,
            title: {
                display: true,
                text: ['Light Intensity'],
                fontSize: 14
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Date (3 day intervals)'
                    },
                    type: 'linear',
                    position: 'bottom',
                    ticks: {
                        max: 59,
                        min: 0,
                        stepSize: 10,
                        callback: function(value, index, values) {
                            return chartData.labels[index];
                        }
                    }
                }],
                yAxes: [{
                    display: true,
                    ticks:{min: 0, max: 400, reverse: false},
                    scaleLabel: {
                        display: true,
                        labelString: 'Photosynthetically Available Radiation'
                    }
                }]
            }
        }
    });
};


// change colors of points here
function algeaFill(respiration, depth){


    var dataPoints = [];

    lightAvgs = [65.3, 33.14, 22.01, 34.74, 26.58, 38.49, 48.12, 44.3, 28.55, 28.92, 37.21, 38.13, 42.49, 44.65, 80.62, 104.66, 87.16, 72.72, 91.07, 93.89, 113.01, 109.56, 110.08, 126.43, 128.98,
    165.52, 196.73, 156.93, 140.41, 130.24, 164.14, 150.28, 127.09, 134.54, 129.89, 115.30, 181.71, 259.52, 269.57, 241.86, 221.29, 212.84, 246, 271.05, 238.03, 250.05, 256.02, 236.56, 259.93, 
    286.6, 283.94, 298.4, 279.81, 256.37, 262.98, 236.18, 305.79, 318.73, 289.67, 277.52];


    for(var i = 0; i < 60; i++){
        if(lightAvgs[i] <= depth){
            window.myLine.data.datasets[0].pointBackgroundColor[i] = "green";
        }else{
            window.myLine.data.datasets[0].pointBackgroundColor[i] = "blue";
        }
        dataPoints.push({x: i, y: lightAvgs[i]});
    }


    return dataPoints;

}

    // call algeaFill
    window.myLine.data.datasets[0].data = algeaFill(respirationSlider.value, depthSlider.value);

    window.myLine.update();
});

1 Ответ

0 голосов
/ 28 ноября 2018

в каждом dataset объекте вставьте backgroundColor и pointBackgroundColor свойства.

backgroundColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)'
...