javascript - 添加值后 ChartJS 图表不缩放

Question

我有一个使用 ChartJS 创建的动态更新图表。但是当我添加更多值时，图表不会更新/重新缩放 x 轴以显示这些值。我只看到两个值，当我添加更多值时，线条会超出图表。 Y 轴根据我添加的值自动缩放。

<div id="event-area" class="row">
        <canvas id="valueChart"></canvas>
</div>
<script>
var chartConfig = {
        type: 'line',
        data: {
            labels: [],
            datasets: [],
            options: {
                responsive: true
            }
        }
    };
    window.onload = function () {
        var ctx = document.getElementById('valueChart').getContext('2d');
        window.valueChart= new Chart(ctx, chartConfig);
    };
</script>

//This is the code I use to update the chart
if (request.data["1005"] != undefined){
    var datasetIndex = chartMap.get(request.dataSetName)
    chartConfig.data.datasets[datasetIndex].data.push(request.data["value"]);
    window.valueChart.update({duration: 0});
}

Fiddle 中的类似问题 https://jsfiddle.net/3c7bzmk8/2 (如果您一直按以添加值，则图表 x 轴不会缩放)

Answer 1

您也可以更改 "data: { labels: [],}" 数组。

将数据插入datasets.data后，将values插入labels数组，图表就会发生变化。

options.data.labels.push('another color')

或者重建整个标签和数据集数组，图表将重新缩放。

您可以更改其中的现有值，它将重新呈现。