Question

我正在使用chart.js库，但遇到一些问题，我需要在一个视图中创建2个图表。

问题是，我从中获取图表数据，因为容器中的每1分钟数据都在更新，因此我在脚本中捕获了此数据，并且希望将此数据添加到图表中。

代码：

    var ctx = $("#chart1").get(0).getContext("2d");
var ctx2 = $("#chart2").get(0).getContext("2d");

var effData = [];
var effLable = [];
var secondValueArr = [];

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: effLable,
        datasets: [{
            data: effData,
            fill: false,
            borderColor: '#2196f3',
            backgroundColor: '#2196f3',
            borderWidth: 1
        }]

    },
    options: {
        legend: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var value = data.datasets[0].data[tooltipItem.index];
                    value = value.toString();
                    value = value.split(/(?=(?:...)*$)/);
                    value = value.join(',');
                    return value;
                }
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    userCallback: function (value, index, values) {
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(',');
                        return value;
                    }
                }
            }],
            xAxes: [{
                ticks: {
                }
            }]
        }
    }

});

var myChart2 = new Chart(ctx2, {
    type: 'line',
    data: {
        labels: effLable,
        datasets: [{
            data: effData,
            fill: false,
            borderColor: '#2196f3',
            backgroundColor: '#2196f3',
            borderWidth: 1
        }]

    },
    options: {
        legend: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var value = data.datasets[0].data[tooltipItem.index];
                    value = value.toString();
                    value = value.split(/(?=(?:...)*$)/);
                    value = value.join(',');
                    return value;
                }
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    userCallback: function (value, index, values) {
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(',');
                        return value;
                    }
                }
            }],
            xAxes: [{
                ticks: {
                }
            }]
        }
    }

});


function addData(chart, label, data) {
    chart.data.labels = label
    chart.data.datasets.forEach((dataset) => {
        dataset.data = data;
    });
    chart.update();
}

function setIntervaldata() {
    setInterval(getDataFromPage, 3000);
}

function getDataFromPage() {
    var data = $("#eff0").html();
    var secondValue = $("#eff1").html();
    var time = $("#time").html();
    var result = data.replace('%', '')
    var result2 = secondValue.replace('%', '');

    effData.push(result);
    effLable.push(time);
    secondValueArr.push(result2);
    addData(myChart, effLable, effData)
    addData(myChart2, effLable, secondValueArr)
    myChart.update();
}

setIntervaldata();

所以现在我将代码复制为创建第二张图表，这不好，因为将来我会添加更多图表，并且我想使此代码灵活。

我的HTML：

  <canvas id="chart1" height="100" width="400"></canvas>
  <canvas id="chart2" height="100" width="400"></canvas>

如您所见，代码被复制了，我如何避免代码被复制，我尝试使用循环，但是对于每个图表，我都有另一个数据，这对我来说不是很好。

Answer 1

创建一个如下图所示的函数：

function renderChart(elmId,effData,effLable) {

 let ctx = $('#'+elmId).get(0).getContext("2d");
 let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: effLable,
        datasets: [{
            data: effData,
            fill: false,
            borderColor: '#2196f3',
            backgroundColor: '#2196f3',
            borderWidth: 1
        }]

    },
    options: {
        legend: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    var value = data.datasets[0].data[tooltipItem.index];
                    value = value.toString();
                    value = value.split(/(?=(?:...)*$)/);
                    value = value.join(',');
                    return value;
                }
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    userCallback: function (value, index, values) {
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(',');
                        return value;
                    }
                }
            }],
            xAxes: [{
                ticks: {
                }
            }]
        }
    }

});
return myChart;  // return if you further require newly created chart Object
}

如何使用Charts.js jQuery

1 个答案: