HighCharts: как отобразить уникальный текст для yAxis Label на сплайн-диаграмме

В сплайновой диаграмме я хочу показать разные тексты как метку yAxis

В настоящее время я могу отображать только один и тот же текст для всех значений данных.

https://jsfiddle.net/thushara07/oty094Lb/27/

yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function () {
           return 'test' ;

            }
        }
    }

Ожидаемые результаты: для меток оси Y на сплайн-диаграмме показывать разные тексты вместо одной точки. стоимость

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
0
82
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете попробовать хайчарты формат этикетки

Попробуй это:

var labelsList = ["Very Low", "Low", "Medium", "High", "Very High"];
Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [1,2,3,4,5,6]
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function (e) {
              switch(true) {
                case (e.value <= 5): 
                  return labelsList[0];
                case (e.value <= 10): 
                return labelsList[1];
                case (e.value <= 15): 
                  return labelsList[2];
                case (e.value <= 20): 
                  return labelsList[3];
                case (e.value <= 30): 
                  return labelsList[4];
             }
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: 'Tokyo',
        marker: {
            symbol: 'square'
        },
        data: [ {
        		name:'test1',
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }, {
            y: 26.5,
            marker: {
                symbol: 'square'
            }
        },{
            y: '',
            marker: {
                symbol: 'square'
            }
        },{
            y: 5,
            marker: {
                symbol: 'square'
            }
        },{
            y: 5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }]

    }, {
        name: 'Mumbai',
        marker: {
            symbol: 'square'
        },
        data: [ {
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }, {
            y: 26.5,
            marker: {
                symbol: 'square'
            }
        },{
            y: '',
            marker: {
                symbol: 'square'
            }
        },{
            y: 10,
            marker: {
                symbol: 'square'
            }
        },{
            y: 10,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }]

    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Вы можете создать некоторый внешний набор данных и ссылаться на него из функции:

var customLabels = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7'],
    label,
    counter = 0;

Highcharts.chart('container', {
    ...,
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function() {
                label = customLabels[counter];
                counter++;

                if (this.isLast) {
                    counter = 0;
                }

                return label;
            }
        }
    },
});

Живая демонстрация:https://jsfiddle.net/BlackLabel/7tdabr84/

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