时间戳

首页 > 解决方案 > 当折线图是单个 X 轴值时，如何将折线图水平居中？

chart.js - 当折线图是单个 X 轴值时，如何将折线图水平居中？

问题描述

当只有一个 X 轴值时，如何将 Chart.js (v2.8.0) 折线图的 X 轴居中？

<span style="width:50%; display:inline-block;">
    <canvas id="myChart"></canvas>
</span>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan'],
        datasets: [
            { borderColor: 'green', data: [5], label: 'SET1' },
            { borderColor: 'red', data: [7], label: 'SET2' },
            { borderColor: 'blue', data: [3], label: 'SET3' }
        ]
    }
});
</script>

折线图示例

标签： chart.js

解决方案

请参阅只有一点的 Chartjs 折线图 - 如何居中

您可以添加虚拟标签以使您的单点居中：

{
    type: 'line',
    data: {
        labels: ['', 'Jan', ''],
        datasets: [
            { borderColor: 'green', data: [null, 5, null], label: 'SET1' },
            { borderColor: 'red', data: [null, 7, null], label: 'SET2' },
            { borderColor: 'blue', data: [null, 3, null], label: 'SET3' }
        ]
    }
}

或者您可以使用scatter图表类型手动指定点的 x 坐标。

推荐阅读