Как убрать минусы в торнадо / гистограмме - PullRequest
Новая
       8

Как убрать минусы в торнадо / гистограмме

0 голосов
/ 02 июля 2018

У меня есть диаграмма (горизонтальный бар, измененный на диаграмму торнадо) в chart.js, который изменяется от -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>

Код на скрипке

1 Ответ

0 голосов
/ 02 июля 2018

options.scales.xAxes.ticks имеет callback, который можно использовать для манипулирования значением так, как оно должно отображаться.

Документы: 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/

...