3

3 つの異なるエネルギー コストを表示するハイチャート グラフがあります。凡例を表示することも、軸のタイトルを表示することもできないようです。

凡例にはタイトルが必要です。ガス、電気、石油、それらも軸にある必要があります。

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

凡例の場合、true値で有効なパラメーターを追加する必要があります。 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 に答える