Question

我正在创建许多包含相同默认框架的高级图表。为了更新图表的动态元素，我一直在创建新对象并在绘制图表的函数调用中引用它们。

这一直很好，直到我开始尝试使轴标签动态化（某些图表需要双轴）。我已经包含了一个jsfiddle，它显示了我正在使用的动态结构以及硬编码的相同图表的示例。有人能告诉我为什么这可能不起作用吗？

http://jsfiddle.net/lcsmith_stsci/H5Xeb/

对象示例：

yAxis = {
    'dollars': function () { 
        var yAxis = { 
            title: { 
                text: "Burdened Dollars" 
            }
        }
        return yAxis;
    }
};

如何在highcharts对象中引用它的示例：

    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    xAxis: {
        categories: ['FY Total']
    },
    yAxis: yAxis.dollars,
    series: [{
        name: 'YTD Plan',
        data: [1000]
    }, {
        type: 'column',
        name: 'YTD Actual',
        data: [900]
    }]
    });

感谢任何帮助。

Answer 1

您不能在highcharts中使用函数作为属性。但是，您可以在加载图表后使用highcharts API：

chart.yAxis[0].setTitle({
        text: "Burdened Dollars"
});

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/axis-settitle/

Answer 2

Highcharts 3.0版本允许通过update（）函数动态更改轴

http://api.highcharts.com/highcharts#Axis.update()

Answer 3

这是工作小提琴：DEMO。

当您将“美元”声明为返回值的函数时，您必须将其称为yAxis: yAxis.dollars(),

JS代码：

var yAxis = {
    'dollars': function () { 
        var yAxis = { 
            title: { 
                text: "Burdened Dollars" 
            }
        };
        return yAxis;
    }
};

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            categories: ['FY Total']
        },
        yAxis: yAxis.dollars(),//call it like this
        series: [{
            name: 'YTD Plan2',
            data: [1000]
        }, {
            type: 'column',
            name: 'YTD Actual',
            data: [900]
        }]
    });
});

Highcharts：动态更改/添加轴属性

3 个答案: