3

我有一个显示三种不同能源成本的 Highcharts 图表。我似乎无法显示我的图例,也无法显示轴标题。

传奇应该有标题;天然气、电力、石油,它们也应该在轴上。

JSFiddle 的链接是:

http://jsfiddle.net/petenaylor/HHEfW/3/

(function ($) { // encapsulate jQuery
    $(function () {
        var seriesOptions = [],
            yAxisOptions = [],
            seriesCounter = 0,
            names = ['Electric', 'Oil', 'Gas'],
            colors = Highcharts.getOptions().colors;

        $.each(names, function (i, name) {
            $(function () {
                $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
                    // Create the chart
                    window.chart = new Highcharts.StockChart({
                        chart: {
                            renderTo: 'container',
                            zoomType: 'x'
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: 10,
                            y: 100,
                            borderWidth: 0
                        },
                        rangeSelector: {
                            selected: 12
                        },
                        title: {
                            text: 'Energy Prices'
                        },
                        yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
                        series: [
                            {
                                name: 'Electric',
                                yAxis:0,
                                data: [
                                    [1072915200000, 5.73],
                                    [1073001600000, 5.81],
                                    [1073088000000, 5.23],
                                    [1073174400000, 5.32]
                                ],
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }, {
                                name: 'Oil',
                                yAxis:1,
                                data: [
                                    [1072915200000, 29.73],
                                    [1073001600000, 29.73],
                                    [1073088000000, 29.73],
                                    [1073174400000, 29.73]
                                ],
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }, {
                                name: 'Gas',
                                yAxis:2,
                                data: [
                                    [1072915200000, 0.823],
                                    [1073001600000, 0.82],
                                    [1073088000000, 0.82],
                                    [1073174400000, 0.82]
                                ],
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }
                        ]
                    });
                });
            });
        });

        // create the chart when all data is loaded
        function createChart() {
            chart = new Highcharts.StockChart({
                chart: {
                    renderTo: 'container'
                },
                rangeSelector: {
                    selected: 4
                },
                yAxis: [{ // Primary yAxis
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? '+' : '') + this.value + '%';
                        },
                        style: {
                            color: '#89A54E'
                        }
                    },
                    title: {
                        text: 'Electric',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    opposite: true
                }, { // Secondary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Oil',
                        style: {
                            color: '#4572A7'
                        }
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        },
                        style: {
                            color: '#4572A7'
                        }
                    }

                }, { // Tertiary yAxis
                    gridLineWidth: 0,
                    title: {
                        text: 'Gas',
                        style: {
                            color: '#AA4643'
                        }
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        },
                        style: {
                            color: '#AA4643'
                        }
                    },
                    opposite: true
                }],
                plotOptions: {
                    series: {
                        compare: 'percent'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },
                series: seriesOptions
            });
        }
    });
})(jQuery);

谁能帮我显示图例和轴标题?

图例还需要可点击,以便每行在点击时消失并重新出现。

非常感谢您的帮助

皮特

4

1 回答 1

8

对于图例,您应该添加具有真值的启用参数。 http://jsfiddle.net/HHEfW/5/

legend: {
    enabled: true
}

yAxis 标题不起作用,因为没有定义,所以你应该添加带有文本值的标题参数。http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-text/

于 2013-03-20T15:01:06.033 回答