ChartJS - 在同一日期具有多个值的图形

Question

我正在尝试构建一个 chart.js 图表。在我有一个每个日期有 1 个值的折线图之前。但是现在我的要求发生了变化，我需要每个日期有两个值（最大值和最小值），如下所示：

之前假装

我尝试在 this example 之后使用 scatter 图表，但显然它不适用于日期，结果如下：

我试过的代码

...
$.each(grafico, function (index1, value) {
                           console.log("########################################");
                           console.log(value);

                           data = value.x.map(function (a) { return a.x; });
                           dates = value.x.map(function (a) { return a.date });

                           var myData = {
                               datasets: [{
                                   label: "Dataset #1",
                                   backgroundColor: "rgba(255,99,132,0.2)",
                                   borderColor: "rgba(255,99,132,1)",
                                   borderWidth: 2,
                                   hoverBackgroundColor: "rgba(255,99,132,0.4)",
                                   hoverBorderColor: "rgba(255,99,132,1)",
                                   data: [
                                       x => data,
                                       y => dates
                                   ]
                               }]
                           };

                           var myOption = {
                               scales: {
                                   yAxes: [{
                                       stacked: true,
                                       gridLines: {
                                           display: true,
                                           color: "rgba(255,99,132,0.2)"
                                       }
                                   }],
                                   xAxes: [{
                                       gridLines: {
                                           display: true,
                                           color: "rgba(255,99,132,0.2)"
                                       }
                                   }]
                               },
                               elements: {
                                   line: {
                                       tension: .1, // bezier curves
                                   }
                               }
                           };

                           /*$.each(data, function (index, value) {
                               dataLabels[index] = 'X' + (index + 1);
                           });*/
                       
                           window['ctx' + index + index1] = document.getElementById('chart' + value.cellId + value.component).getContext('2d');
                           window['myChart' + index + index1] = new Chart(window['ctx' + index + index1], {
                               type: 'scatter',
                               options: myOption,
                               data: myData
                           });
                       });
...

我的数据是这样的

PS: 出于简单原因，我首先尝试为每个日期添加一个值，然后从那里继续。

Answer 1

您只需要添加另一个数据集。

let data1 = value.x[0]; // first set of data
let data2 = value.x[1]; // second set of data


datasets: [
    {
        label: "Dataset #1",
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        borderWidth: 2,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        data: data1,
        parsing: { // what values to use from data1
            yAxisKey: 'x',
            xAxiskey: 'date',
        },
    },
    {
        label: "Dataset #2",
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        borderWidth: 2,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        data: data2,
        parsing: { // what values to use from data2
            yAxisKey: 'x',
            xAxiskey: 'date',
        },
    }
],

ChartJS - 在同一日期具有多个值的图形

ChartJS - Graphic with multiple values on the same date

charts

chart.js