Формат меток данных, зависящих от значения или логики, в старших диаграммах - PullRequest
Новая
       14

Формат меток данных, зависящих от значения или логики, в старших диаграммах

0 голосов
/ 29 ноября 2018

Есть ли решение в Highcharts для форматирования метки в зависимости от значения?

Я знаю, что есть опция цветовых зон для зависимого форматирования столбцов на основе значения данных.Например, если значение больше 10, столбец становится красным, в противном случае остается базовый цвет.

Мне нужно получить очень похожую функцию для dataLabels.Если значение больше 10, поверните фон метки на красный.Если это возможно, существует ли решение для динамического получения этого конкретного значения из ряда данных, или только может быть / должно быть статическим параметром?

Значения больше 100 должны иметь красный цвет фона dataLabel, а остальные(меньший) зеленый цвет фона: https://jsfiddle.net/saboarpad/6bow3mx1/3/

Highcharts.chart('container', {
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            backgroundColor:'red',
            color:'white'
        }
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Вы можете редактировать стиль меток данных после того, как они были сгенерированы: 

chart: {
    events: {
        load: function() {
            var points = this.series[0].points;

            points.forEach(function(point) {
                if (point.y > 100) {
                    point.dataLabel.text.css({
                        'color': 'white',
                        'background-color': 'red'
                    });
                }
            });
        }
    }
}

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/h64gjL2t/

Кроме того, вы можете индивидуально отформатировать dataLabel для каждой точки: https://jsfiddle.net/BlackLabel/4k8p6mfg/

series: [{
    data: [{
            x: 0,
            y: 29.9,
            dataLabels: {
                backgroundColor: 'red',
                color: 'white'
            }
        },
        71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4
    ]
}]

API: https://api.highcharts.com/highcharts/series.line.data.dataLabels

0 голосов
/ 29 ноября 2018

Я нахожу подобное решение, но не совсем понятно использование кода.В узле dataLabels есть эта функция «formatter», которая определяет цветовой код на основе значения this.y, поэтому здесь мы можем сделать некоторое сравнение данных: какие из них больше или меньше, и функция возвращает цветовой код и объединяетв HTML-элементы span встроенный стиль.Однако все работает до тех пор, пока не будет использован простой тег «color», но это для цвета шрифтов.Мне также нужно было изменить фон.Поэтому я изменил цветовой тег на: 1. Собственный тег Highcharts: «backgroundColor» - ничего не происходит 2. HMTL фоновый цветовой тег: «background-color» - ничего не происходит

:( Я чувствую, что-то вродепотеряно. 

Highcharts.chart('container', {
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            color: 'blue',
            formatter: function() {
                var color = this.y > 100 ? 'red': 'green'
                return '<span style="color: ' + color + '">' + this.y + '</span>';
            }



        }
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

...