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

小提琴中的类似问题 https://jsfiddle.net/3c7bzmk8/2（如果继续按以添加值，则图表x轴将无法缩放）

Answer 1

您也可以更改数组。

在将数据推入datasets.data后，将值推入标签数组，图表将被更改。

"data: { labels: [],}"

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

您可以在其中更改现有值，然后将其重新呈现。

添加值后ChartJS图表未缩放

1 个答案: