Question

我有一个页面，我动态加载不同的图表，用SQL表中的新数据更新自己。它们具有最大和最小限制，如果线条图表上的点突破限制（如果太高或太低，它们变成红色，否则它们是绿色的），我可以使线图上的点变色。

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

我有一组单选按钮：动画 - 不动画 - bezierCurves - No 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

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

Answer 2

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

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

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();
    }
}

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

2 个答案: