6

私はいくつかのチャートを生成するアプリケーションに取り組んでおり、chartjs を使用してそれらを描画しています。

私が直面している問題はこれです: グラフは動的データで生成されます。アプリケーションは最大 9 つのデータセットを生成する場合があり、それらが同じサイズになることはめったにありません。データセットのサイズが一致しない場合、chartjs を進めたり、値を埋めたりするにはどうすればよいですか?

ここのstackoverflowやchartjs githubページでもいくつかの例を見ましたが、うまくいきませんでした。

これは私がこれまでに持っているものの例です: https://jsfiddle.net/camarrone/49onz8no/1/

データ配列が異なる 2 つのデータセット。2 番目のデータセットの最初の値は存在しないため、ゼロまたは null にする必要があります。このように: 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>
4

2 に答える 2