html - ChartJS - 具有不同大小数据集的折线图

问题描述

我正在开发一个将生成一些图表的应用程序，我正在使用 chartjs 来绘制它们。

我面临的问题是：图表将使用动态数据生成。该应用程序最多可以生成 9 个数据集，并且它们很少具有相同的大小。当数据集大小不匹配时，如何使 chartjs 前进或填充值？

我在stackoverflow甚至chartjs github页面上都看到了一些示例，但它们对我不起作用。

这是我到目前为止的一个例子：https ://jsfiddle.net/camarrone/49onz8no/1/

具有不同数据数组的两个数据集。第二个数据集的第一个值不存在，因此它应该为零或空。像这样：https ://jsfiddle.net/camarrone/d39a0qgw/

这是“失败”代码供参考：

<html>
  <head>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
  </head>
  <body>

    <div style="width: 900px; height: 500px">
        <canvas id="chart1"></canvas>
    </div>

    <script>
        let chart1 = new Chart(document.getElementById("chart1"), {
            type: 'line',
            data: {
                labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
                datasets: [
                    {
                        type:  'line',
                        fill: false,
                        label: 'Label_1',
                        borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
                        data: [7,3,11,2,3]
                    },
                    {
                        type:  'line',
                        fill: false,
                        label: 'Label_2',
                        borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
                        data: [1,6,1,2]
                    },
                ],
            },
            options: {
                animation: {
                    duration: 0
                },
                title: {
                    display: false,
                    text: ''
                },
                legend: {
                    labels: {
                        useLineStyle: true
                    },
                    position: 'bottom',
                },
            }
        });
    </script>    
  </body>
</html>

标签： htmlchart.jschartjs-2.6.0

对于那些面临相同问题和未来参考的人。这是我的案例的工作代码：

<html>
  <head>
    <script type='text/javascript' src='./momentjs-with-locales.js'></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>

  </head>
  <body>

    <div style="width: 900px; height: 500px">
        <canvas id="chart1"></canvas>
    </div>

    <script>
        let chart1 = new Chart(document.getElementById("chart1"), {
            type: 'line',
            data: {
                labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
                datasets: [
                    {
                        fill: false,
                        label: 'Page View',
                        borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
                        data: [
                            {
                                labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
                            },
                            {
                                x: new Date('2018-04-21T16:00:00'),
                                y: 7
                            },
                            {
                                x: new Date("2018-04-21T18:00:00"),
                                y: 3
                            },
                            {
                                x: new Date("2018-04-21T20:00:00"),
                                y: 11
                            },
                            {
                                x: new Date("2018-04-23T12:00:00"),
                                y: 2
                            },
                            {
                                x: new Date("2018-04-23T13:00:00"),
                                y: 3
                            }
                        ],
                    },
                    //dataset 2
                    {
                        fill: false,
                        label: 'View Content',
                        borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
                        data: [
                            {
                                labels: ["2018-04-21T17:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
                            },
                            {
                                x: new Date("2018-04-21T17:00:00"),
                                y: 1
                            },
                            {
                                x: new Date("2018-04-21T20:00:00"),
                                y: 6
                            },
                            {
                                x: new Date("2018-04-23T12:00:00"),
                                y: 1
                            },
                            {
                                x: new Date("2018-04-23T13:00:00"),
                                y: 2
                            }
                        ],
                    },
                ],
            },
            options: {
                animation: {
                    duration: 0
                },
                title: {
                    display: false,
                    text: ''
                },
                legend: {
                    labels: {
                        useLineStyle: true
                    },
                    position: 'bottom',
                },
                scales: {
                    xAxes: [
                        {
                            type:'time',
                            distribution: 'series',
                            time: {
                                unit: 'day',
                                displayFormat: {
                                    day: 'DD/MM/YYYY'
                                }
                            },
                        }
                    ],
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true,
                            },
                        }
                    ]
                }
            }
        });
    </script>    
  </body>
</html>

在线演示：

html - ChartJS - 具有不同大小数据集的折线图

问题描述

解决方案

推荐阅读