Создайте гистограмму в chart.js с легендой, которая отражает метки на оси x

В Charts.js я пытаюсь создать гистограмму с одним набором данных, и каждый столбец имеет свой цвет. Желаемый результат будет выглядеть так: enter image description here

Однако когда я пытаюсь создать что-то подобное, в лучшем случае я получаю следующее enter image description here

Следующий код - это объект конфигурации диаграммы, используемый для инициализации диаграммы:

var config_canvas_alerts = {
        type: 'bar',
        data: {
            datasets: [{
                data: [
                    value0,value1,value2,value3,
                ],
                backgroundColor: [
                    "#F7464A","#46BFBD","#FDB45C","#949FB1",
                ],
            }],
            labels: [
                "Move - Match " + value0,
                "Move - Unmatch " + value1,
                "Permit - Match " + value2,
                "Permit - UnMatch" + value3,
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'right',
                onClick: function (e, p) {
                    alert(p.text);
                },
            },
            title: {
                display: true,
                text: '@Model.mgt_dash_alert.graph_title',
                position: 'top',
                fontStyle: 'normal',
                fontSize: 14,
                padding: 10
            }
        }
    };

Я попытался реструктурировать данные так, чтобы каждое значение data стало отдельным объектом набора данных с сопутствующим значением, цветом фона и меткой, но это тоже не сработало.

Единственный способ, которым я смог добиться этого (и, следовательно, как я создал первый снимок экрана), - это динамическое изменение графика с круговой диаграммы на гистограмму после инициализации. Легенда казалась удачной.

Динамический переход от круговой диаграммы к гистограмме не идеален. Есть какие-нибудь предложения?

value0 происходит из массива или value0 само по себе переменная?

Aroon 10.09.2018 10:34

почему ты хочешь сделать это? Он просто повторяет информацию, которая уже есть на диаграмме (в виде меток оси x). Все это лишь добавляет шума и затрудняет понимание диаграммы. Я бы рекомендовал просто не показывать легенду.

timclutton 10.09.2018 11:13

@timclutton: столбцы кликабельны, но для некоторых пользователей попытка щелкнуть крошечные столбцы может быть немного сложной. Легенда решит эту проблему, так как метки также будут интерактивными.

Notaras 10.09.2018 23:33
0
3
66
0

Другие вопросы по теме