Блог

Я пытаюсь программно добавить строку к оси x вместо того, чтобы объявлять ее при создании диаграммы.

Итак, например, у меня есть моя диаграмма:

 $.(document).ready(function{) {
    chart=new Highcharts.Chart({
        chart:{
            renderTo: 'container',
            type: 'line'
        }
    yAxis: {
        title: { text: 'theYaxis'}
    }
    series: [1,2,3,4]
    });
});
  

Теперь я хочу изменить название yAxis, поэтому я создаю небольшую функцию; так что это будет выглядеть так:

var titleY;

 function loadme(){

    $.get('names.csv', function(data){
        var lines= data.split('n');
        titleY=lines[0].split(','[0];
    });
}

$.(document).ready(function{) {
    chart=new Highcharts.Chart({
        chart:{
            renderTo: 'container',
            type: 'line'
        }
    yAxis: {
        title: { text: titleY}
    }
    series: [1,2,3,4]
    });
    loadme();
});
  

Это приведет к тому, что заголовок будет пустым.

Я проверяю, правильно ли получено значение, используя console.log, и значение собирается и печатается. Что здесь не так? Я получаю ту же проблему, если я заполняю функцию $.get данными, которые я хочу добавить в ряд на диаграмме: данные никогда не добавляются на диаграмму, даже если они правильно извлечены.

Я создал демонстрационную скрипку для динамического изменения названия оси y. Обратитесь к этому JSFIDDLE

HTML:

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

<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">
  

JS (часть кода для обновления названия оси y при нажатии кнопки):

 var chart = $('#container').highcharts();
    $('#my_btn').click(function(){
        //alert('hey');
        chart.yAxis[0].update({
            title:{
                text:"My text"
            }
        });
        alert('Y-axis title changed to "My text" !');
    });
  

Обратитесь к документации функции Highcharts ‘update’ для получения дополнительной информации.

У вас есть два варианта:

• используйте axis.setTitle() — хорошая производительность, я советую использовать это решение для настройки заголовка
• использовать axis.update() — более низкая производительность, потому что он воссоздает всю ось, в то время как первый метод изменяет только заголовок