javascript - 如何消除 Tornado /条形图中的缺点

Question

我在chart.js中有一个图表(horizo​​ntalBar修改为 Tornado 图表)，其范围从-100到100。但我不希望图表在左侧数字前面直观地显示负数。关于如何删除它们有什么建议吗？

我也没有成功地尝试从上到下绘制线条来指示图表下方所写的值(不清楚、中等、清晰等)。任何有关这方面的帮助也将不胜感激。

<canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
 <div class="row justify-content-between">
 <a href="#">Very clear</a> | <a href="#">Clear</a> | <a href="#">Moderate</a> | <a href="#">Unclear</a> | <a href="#">Moderate</a> | <a href="#">Clear</a> | <a href="#">Very clear</a>
 </div>
<script>
new Chart(document.getElementById("bar-chart-horizontal"), {
    type: 'horizontalBar',
    data: {
        labels: ["", "", "", ""],
        datasets: [
            {
                label: "Strenght",
                backgroundColor: ["#004070", "#ff2384", "#004070", "#ff2384"],
                data: [61, 35, -29, 13]
            }
        ]
    },
    options: {
        legend: { display: false },
        title: {
            display: true,
            text: 'Score'
        },
        scales: {
            xAxes: [{
                ticks: {
                    suggestedMin: -100,
                    suggestedMax: 100
                }
            }]
        }
    }
});
</script>

Code on fiddle

Answer 1

options.scales.xAxes.ticks 有一个回调，可用于操纵应该显示的值。

文档: http://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration

options: {
    scales: {
        xAxes: [{
            ticks: {
                callback: value => value.toString().replace('-', '')
            }
        }]
    }
}

工作示例: https://jsfiddle.net/Lkea8z2q/11/