Question

我正在尝试以编程方式将字符串添加到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函数，我会得到同样的问题：数据永远不会添加到图表中，即使它已被正确检索。

Answer 1

我创建了一个演示小提琴来动态更改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' function documentation 。

Answer 2

您有两种选择：

使用axis.setTitle() - 性能良好，我建议使用该解决方案来设置标题
使用axis.update() - 降低性能，因为它会重新创建整个轴，而第一种方法只会更改标题

Highcharts：动态（以编程方式）分配轴名称

2 个答案: