Question

我有一张Highcharts Graph，显示三种不同的能源成本。我似乎无法显示我的传奇，也无法显示轴标题。

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

JSFiddle的链接是：

(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);

有人可以帮我展示传奇和轴标题吗？

图例也需要点击，以便每条线消失并在点击时重新出现。

非常感谢你的帮助

皮特

Answer 1

对于图例，您应该使用true值添加enabled参数。 http://jsfiddle.net/HHEfW/5/

legend: {
    enabled: true
}

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

图例和轴标题未在Highcharts Graph中显示

1 个答案: