Как отобразить разные метки данных на патерографе в Chart. js - PullRequest
Новая
       119

Как отобразить разные метки данных на патерографе в Chart. js

0 голосов
/ 05 августа 2020

Я пытаюсь нанести на этот график метки значений данных. Я использую диаграмму. js для отображения моих данных.

Текущее изображение

На линейном графике в конце должны быть символы «%», а гистограмма остается тот же самый. Это мой текущий код. Я не уверен, как добавить средство форматирования к одному набору данных, а не к другому. 

        type: 'bar',
        data: {
            labels: {{dataDict['keys_ALL']|safe|tojson}}.slice(1,-1).split(','),
            datasets: [{
                type: 'line',
                label: '% of total errors',
                backgroundColor: window.chartColors.orange,
                borderColor: window.chartColors.orange,
                yAxisID: 'y-axis-1',
                borderWidth: 2,
                fill: false,
                data:{{dataDict['percent_errors_dict']}}[0],
    
            }, {
                type: 'bar',
                label: 'Count of Errors',
                backgroundColor: window.chartColors.purple,
                borderColor: window.chartColors.purple,
                yAxisID: 'y-axis-2',
                data: {{dataDict['count_errors_dict']}}[0],
                borderWidth: 2,
            }],
        },
        options: {
            plugins: {
                datalabels: {
                    anchor: 'start',
                    align: '-45',
                    clamp: true,
                    color: "white",
                }
            },
            responsive: true,
            legend: {
                labels: {
                   fontColor: "#acb5bf",
                }
            },
            title: {
                display: true,
                text: 'Percentage and Count of Errors by Type',
                fontColor: "#acb5bf",
            },
            tooltips: {
                mode: 'index',
                intersect: true,
            },
            scales: {
                xAxes: [{
                    display: true,
                    align: 'center',
                    ticks: {
                        fontColor: "#acb5bf"
                    }
                }],
                yAxes: [{
                    type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',

                    scaleLabel: {
                        display: true,
                        labelString: '% of total Errors',
                        fontColor:'white'
                    },
                    ticks: {
                        fontColor: "#acb5bf",
                        beginAtZero: true,
                        max:100
                    }
                },
                {
                    type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                        drawOnChartArea: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Error Count',
                        fontColor:'white'
                    },
                    ticks: {
                        fontColor: "#acb5bf",
                        beginAtZero: true,
                    }
                }],
            }
        }
    };

Это код для средства форматирования: 

formatter: function (value) {return value == 0 ? "" : value + " %";}
...