Question

我在javascript图表上遇到问题，该数字不是1迭代，而是0.5（请在下面的屏幕中查看）

345-34,5.5-346-34,6.5

我想要这个

345-346-347

我有此代码：

 let followers_chart = new Chart(document.getElementById('followers_chart').getContext('2d'), {
    type: 'line',
    data: {
        labels: <?= $logs_chart['labels'] ?>,
        datasets: [{
            label: '<?= $language->report->display->followers ?>',
            data: <?= $logs_chart['followers'] ?>,
            backgroundColor: '#ED4956',
            borderColor: '#ED4956',
            fill: false
        }]
    },
    options: {
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: (tooltipItem, data) => {
                    let value = data.datasets[0].data[tooltipItem.index];
                    value = value.toString();
                    value = value.split(/(?=(?:...)*$)/);
                    value = value.join(' ');
                    return value;
                }
            }
        },
        title: {
            text: '<?= $language->report->display->followers_chart ?>',
            display: true
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    userCallback: (value, index, values) => {
                        // Convert the number to a string and splite the string every 3 charaters from the end
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(' ');
                        return value;
                    }
                }
            }],
            xAxes: [{
                ticks: {
                }
            }]
        }
    }
});

第二个问题是，顶行和底行不可见。我可以在哪里更改代码和哪个文件？我完全不喜欢JavaScript：D

Answer 1

在体重秤定义中，尝试添加以下内容：

ticks: {
            min: 0,
            beginAtZero: true
}

这至少将确保您可以看到底线。

Answer 2

对于第一个问题，我想您可以在scales > yAxes > ticks中写入参数stepSize，并将其分配给1。对于第二个问题，请尝试输入scales > yAxes > ticks，参数stepSize以及min和max到$logs_chart['followers']的最小值或最大值。

yAxes: [{
   ticks: {
       stepSize: 1,
       min: <?= intval(min($logs_chart['followers'])) - 0.5 ?>,
       max: <?= intval(max($logs_chart['followers'])) + 0.5 ?>
   }
}]

希望它对您有帮助

Javascript图表一个数字步骤

2 个答案: