在 Chart.js 中动态更改图表选项

Question

我有一个页面，我可以在其中动态加载不同的图表，这些图表会使用 SQL 表中的新数据进行自我更新。 它们有最大和最小限制，如果它们超出限制，我可以让折线图上的点改变颜色（如果太高或太低，它们会变成红色，否则它们会变成绿色）

遗憾的是，当我尝试更改图表动画选项或 bezierCurves 选项时，它没有响应，我查看了 chartjs 页面的文档，只能找到如何在创建图表时设置这些选项......我需要根据用户输入制作图表后，在基于间隔的函数上执行此操作......即

我有一组单选按钮： 动画 - 非动画 - bezierCurves - 没有 bezierCurves

看图：）

他们每个人都将他们的可敬变量设置为真/假，这取决于他们是否被检查。 然后，每次更新图表时，我都会尝试将选项更改为变量的值（如果它们与旧的不同）

让我给你一些代码来澄清:)

更新功能：

    // Standard values for all charts
$old_animation = true;
$old_curved = true;

// Start Update funtion for the test chart
setInterval(function update() {

// Set the new options value from the entered user input (on the site)
$curved = $('#curved').val();
    $animation = $('#animation').val();
    if ( $old_animation != $animation || $old_curved != $curved) {

        test_chart.options.animation = $animation;
        test_chart.options.bezierCurves = $curved;

        // Tried the following as well
        //test_chart.animation = $animation;
        //test_chart.options.animation = $animation;


        $old_animation = $animation;
        $old_curved = $curved;
    }

    // Set dataset point 0 value to that of point 1, point 1 to that of point 2 and so on...
    test_chart.datasets[0].points[0].value = test_chart.datasets[0].points[1].value;
    test_chart.datasets[0].points[1].value = test_chart.datasets[0].points[2].value;
    test_chart.datasets[0].points[2].value = test_chart.datasets[0].points[3].value;
    test_chart.datasets[0].points[3].value = test_chart.datasets[0].points[4].value;
    test_chart.datasets[0].points[4].value = test_chart.datasets[0].points[5].value;
    test_chart.datasets[0].points[5].value = test_chart.datasets[0].points[6].value;
    test_chart.scale.xLabels[0] = test_chart.scale.xLabels[1];
    test_chart.scale.xLabels[1] = test_chart.scale.xLabels[2];
    test_chart.scale.xLabels[2] = test_chart.scale.xLabels[3];
    test_chart.scale.xLabels[3] = test_chart.scale.xLabels[4];
    test_chart.scale.xLabels[4] = test_chart.scale.xLabels[5];
    test_chart.scale.xLabels[5] = test_chart.scale.xLabels[6];

    // Get the latest SQL value from the live feed div (hidden) and put that in the last data point
    $live_test = $('#live_test').html();
    $live_test = parseInt($live_test);
    $live_test = $live_test / <?php echo $column_numerator; ?>;

    // Get the last update time for the label of the last data point
    $live_updated = $('#live_updated').html().substr(11);
    test_chart.scale.xLabels[6] = $live_updated;
    test_chart.datasets[0].points[6].value = $live_test;
    console.log('Latest test value = ' + $live_test + ' this has been updated @: ' + $live_updated);




    temperature_chart.update();
}, 4000);

Answer 1

这是不正确的。要更改选项，请使用chart.options where chart = this.chart。

不是更新数据，而是通过chart 对象更新数据。 然后使用chart.update()。这使用点击事件来查看是否只显示一个图例。如果是，则显示数据标签。

legend: {
    display: true,
    onClick: function (e, legendItem) {
        var index = legendItem.datasetIndex;
        var ci = this.chart;
        var meta = ci.getDatasetMeta(index);

        // See controller.isDatasetVisible comment
        meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        var cnt = 0;
        for (var i = 0; i < ci.data.datasets.length; i++) {
            if (!ci.data.datasets[i]._meta[0].hidden) {
                cnt++;
            }
        }
        if (cnt === 1) {
            ci.options.plugins.datalabels.display = true;
        }
        else {
            ci.options.plugins.datalabels.display = false;
        }
        ci.update();
    }
}

Answer 2

由于只能在创建图表时设置选项，因此当您有新的选项要使用时，听起来您需要重新创建/重新绘制图表。您可以在单选按钮上设置一个侦听器，以使用新选项重新创建图表。