在Chart.js中动态更改图表选项 [英] Changing chart options dynamically in Chart.js

问题描述

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

I have a page where I load different charts dynamically which update themselves with new data from an SQL-table. They have maximum and minimum limits and I can make the dots on the line charts change color if they breach their limits (if too high or too low they become red , otherwise they are green)

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

Sadly, when I try changing the charts animation option, or bezierCurves option it does not respond to it, I looked on the chartjs page's documentation and could only find how to set these options when creating the chart... I need to do this on an interval based function after the charts are made depending on user input... i.e.

我有一些单选按钮: 动画-不动画-bezierCurves-没有bezierCurves

I have a collection of radio buttons : Animated - Not animated - bezierCurves - No bezierCurves

在图片上查看:)

根据检查的方式，每个都将其可变量设置为true/false. 然后，每次更新图表时，我都会尝试将选项更改为变量的值(如果它们与旧变量不同)

They each set their respectable variable to true / false depending wether they are checked. Then , every time I update the charts , i try to change the options to the value of the variables (if they differ from the old ones)

让我给您一些代码来修饰一下:)

Let me give you some code to clairify :)

更新功能:

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

推荐答案

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

That is not correct. To change the options use chart.options where chart = this.chart.

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

Instead of updating the data, go through the chart object to update the data. Then use chart.update(). This uses the click event to see if only one legend is displaying. If it is then it displays the data labels.

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中动态更改图表选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！