时间戳

首页 > 解决方案 > ChartJS图表在添加值后不缩放

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

问题描述

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

标签： javascriptchart.js

解决方案

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

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

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

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

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

推荐阅读