Как я могу отобразить установленное количество тиков на оси Y? - PullRequest
Новая
       22

Как я могу отобразить установленное количество тиков на оси Y?

3 голосов
/ 09 апреля 2019

У меня есть график, где я уже знаю установленное количество тиков, которое мне понадобится.Там 3 с диаграммой типа сгруппированных баров.Я ломаю голову над тем, как заставить его.Сейчас он показывает 0 для любого числа, попавшего в мой набор данных, и автоматически масштабируется, как требуется.

По умолчанию предполагается, что я использую числа для масштабирования, но в этом сценарии это положительный, нейтральный, отрицательный (те,буквально) на оси Y, которые представляют собой точки данных, относящиеся к определенной дате на оси X (с двумя сгруппированными столбцами, помеченными как AM / PM).

Документация Chart.js не объясняет, какнастроить при работе вне чисел на конфигурации тиков, и я не уверен, как это включить в чистку. Есть идеи?Ниже приведен код, насколько я получил.

Пример снимка экрана Я в основном смоделировал 3 точки данных, выбрав 4,8 и 12. Я хотел бы, чтобы эти метки были (отрицательные, положительные, нейтральные)) и уберите все остальные галочки. 

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
        datasets: [{
            label: 'Dataset 1', backgroundColor: window.chartColors.red,
stack: 'Stack 0',
            data: [4, 12, 4, 8, 12, 4]
        },{
            label: 'Dataset 1', backgroundColor: window.chartColors.blue,
stack: 'Stack 1',
            data: [8, 8, 12, 4, 4, 12]          
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

Chart as it looks currently

1 Ответ

2 голосов
/ 09 апреля 2019

вам просто нужно добавить обратный вызов в галочках, 

<canvas id="myChart" width="400" height="400"></canvas>
<script src='Chart.js'></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
            datasets: [{
                label: 'Dataset 1', backgroundColor: window.chartColors.red,
                stack: 'Stack 0',
                data: [4, 12, 4, 8, 12, 4]
            }, {
                label: 'Dataset 1', backgroundColor: window.chartColors.blue,
                stack: 'Stack 1',
                data: [8, 8, 12, 4, 4, 12]
            }]
        },
        options: {
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                            callback: function (label, index, labels) {
                                switch (label) {
                                    case 4:
                                        return 'negative';
                                    case 8:
                                        return 'positive';
                                    case 12:
                                        return 'neutral';
                                }
                            }
                        }
                    }
                ]
            }
        }
    });
</script>
...