ChartJS图表在添加值后不缩放答案

【问题标题】：ChartJS chart not scaling after adding valuesChartJS图表在添加值后不缩放
【发布时间】：2019-06-10 18:13:21
【问题描述】：

我有一个使用 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 轴不会缩放）

【问题讨论】：

请创建一个 sn-p 并在那里重现您的问题。
添加了一个 JSFiddle 示例

标签： javascript chart.js

【解决方案1】：

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

将数据推送到datasets.data后，将值推送到labels数组中，图表会发生变化。

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

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

您可以更改那里的现有值，它将被重新渲染。

【讨论】：