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

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

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

我有一系列单选按钮： 已设置动画-未设置动画-贝塞尔曲线-无贝塞尔曲线

见附图：）

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

让我给你一些代码来澄清：）

更新功能：

    // 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);

//所有图表的标准值
$old_animation=true；
$old_=true；
//启动测试图表的更新功能
setInterval（函数更新（）{
//根据输入的用户输入（在站点上）设置新选项值
$curved=$（'#curved'）.val（）；
$animation=$（'#animation'）.val（）；
if（$old_animation！=$animation | |$old_curve！=$curve）{
test_chart.options.animation=$animation；
test_chart.options.bezierCurves=$curve；
//也尝试了以下方法
//test_chart.animation=$animation；
//test_chart.options.animation=$animation；
$old_animation=$animation；
$old_curve=$curve；
}
//将数据集点0的值设置为点1的值，将点1的值设置为点2的值，依此类推。。。
测试图表。数据集[0]。点[0]。值=测试图表。数据集[0]。点[1]。值；
测试图表。数据集[0]。点[1]。值=测试图表。数据集[0]。点[2]。值；
测试图表。数据集[0]。点[2]。值=测试图表。数据集[0]。点[3]。值；
测试图表。数据集[0]。点[3]。值=测试图表。数据集[0]。点[4]。值；
测试图表。数据集[0]。点[4]。值=测试图表。数据集[0]。点[5]。值；
测试图表。数据集[0]。点[5]。值=测试图表。数据集[0]。点[6]。值；
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]；
//从live feed div（隐藏）获取最新的SQL值，并将其放在最后一个数据点中
$live_test=$（'#live_test'）.html（）；
$live_test=parseInt（$live_test）；
$live_test=$live_test/；
//获取最后一个数据点标签的上次更新时间
$live_updated=$（'#live_updated'）.html（）.substr（11）；
test_chart.scale.xLabels[6]=$live_更新；
测试图表。数据集[0]。点[6]。值=$live\U test；
log（'Latest test value='+$live\u test+'此已更新@:'+$live\u updated））；
温度图表更新（）；
}, 4000);

由于只有在创建图表时才能设置选项，因此当您有新的选项要使用时，您似乎需要重新创建/重画图表。您可以在单选按钮上设置侦听器，以使用新选项重新创建图表。

这是不正确的。要更改选项，请使用

chart.options

其中

chart=this.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();
    }
}

图例：{
显示：对，
onClick：函数（e，legendItem）{
var指数=legendItem.datasetIndex；
var ci=这张图表；
var meta=ci.getDatasetMeta（索引）；
//请参阅controller.isDatasetVisible注释
meta.hidden=meta.hidden==null？！ci.data.dataset[index]。hidden:null；
var-cnt=0；
对于（var i=0；i

这正是我想要避免的：）