javascript - 使用 JavaScript 和 Chart.js 根据请求创建多个图表

问题描述

我想创建一个使用 Chart.js 显示动态折线图（现在都带有随机数据）的 html 页面。

一开始我想要一个只显示这五个按钮的空白页面。
单击“添加图表”按钮后，我想在左上角创建一个新图表（或多或少 6 厘米 x 4 厘米）。
从这一刻起，我希望能够在每次按下“添加图表”按钮时添加图表，一个在另一个之下。

我正在努力理解如何<canvas></canvas>和<div></div>工作，以及如何将新图表放在另一个之下。
这是我的代码：

<body>

<div>
    <!-- <table align="right"> -->
    <div>
    <canvas id="myChart" height="120px" width="240px"></canvas>
    </div>
    <!-- </table> -->
</div>
<p>
    <button id="randomizeData">Randomize Data</button>
    <button id="addDataset">Add Dataset</button>
    <button id="removeDataset">Remove Dataset</button>
    <button id="addData">Add Data</button>
    <button id="addChart">Add Chart</button>
</p>

<script>



    //import Chart from "chart.js";

    var 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)'
    };


    function randomScalingFactor() {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    }



    function newChart(){
        var ctx2 = document.getElementById('myChart').getContext('2d');
        window.myChart = new Chart(ctx2, config);
        window.myChart.update();
        alert(config.options.id);
        alert(config.options.title.text);
        configSet();
        alert(config.options.title.text);
    }

    function configSet(){
        config.options.layout.padding.top += t;
        config.options.layout.padding.bottom -= 200;
        config.options.title.text = 'Board Number RR';
        config.options.id += 1;
    }

    function onRefresh(chart) {
        chart.config.data.datasets.forEach(function(dataset) {
            dataset.data.push({
                x: Date.now(),
                y: randomScalingFactor()
            });
        });
    }

    var i='Board Number 1';
    var t=5;
    var b=500;
    var d=1;

    var color = Chart.helpers.color;
    var config = {
        type: 'line',
        data: {
            datasets: [{
                label: 'Dataset 1 (cubic interpolation)',
                backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
                borderColor: chartColors.blue,
                fill: false,
                cubicInterpolationMode: 'monotone',
                data: []
            }]
        },
        options: {
            title: {
                display: true,
                text: i, //var i era 'Board Number X'
            },
            scales: {
                xAxes: [{
                    type: 'realtime',
                    realtime: {
                        duration: 25000, 
                        refresh: 1000,  
                        delay: 1200,    
                        onRefresh: onRefresh
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
            layout: {
                padding:    {
                    left: 0,
                    right: 1000,
                    top: t, //var t 
                    bottom: b //var b 
                }
            },
            id: d, //var d
        }
    };


    document.getElementById('addChart').addEventListener('click', newChart);

   /* window.onload = function() {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myChart = new Chart(ctx, config);
    };*/

    document.getElementById('randomizeData').addEventListener('click', function() {
        config.data.datasets.forEach(function(dataset) {
            dataset.data.forEach(function(dataObj) {
                dataObj.y = randomScalingFactor();
            });
        });
        window.myChart.update();
    });

    var colorNames = Object.keys(chartColors);
    document.getElementById('addDataset').addEventListener('click', function() {
        var colorName = colorNames[config.data.datasets.length % colorNames.length];
        var newColor = chartColors[colorName];
        var newDataset = {
            label: 'Dataset ' + (config.data.datasets.length + 1),
            backgroundColor: color(newColor).alpha(0.5).rgbString(),
            borderColor: newColor,
            fill: false,
            lineTension: 0,
            data: []
        };

        config.data.datasets.push(newDataset);
        window.myChart.update();
    });

    document.getElementById('removeDataset').addEventListener('click', function() {
        config.data.datasets.pop();
        window.myChart.update();
    });

    document.getElementById('addData').addEventListener('click', function() {
        onRefresh(window.myChart);
        window.myChart.update();
    });

</script>

</body>

还有一个奇怪的事情是，创建的第一个图表 config.options.title.text 等于 Board Number RR 而不是 Board Number 1。

标签： javascripthtmlchart.js

javascript - 使用 JavaScript 和 Chart.js 根据请求创建多个图表

问题描述

解决方案

推荐阅读