HighCharts - 动态图和右侧双轴上没有刻度线

Question

我是高位图表的新手。

我正在动态进行 2 次 ajax 调用（在 getData() 函数内）并用 2 个系列（带 2 个 y 轴）绘制高图表。

每个 ajax 调用都返回 json 数据。

第一个 json 数据（示例） [{"dt":"2000 年 5 月 15 日","index":"2,007.030850"},{"dt":"2000 年 5 月 16 日","index":"2,025.956108"}]

第二个 json 数据（示例） [{"dt":"2000 年 5 月 15 日","nav":"145.236000"},{"dt":"2000 年 5 月 16 日","nav":"146.602974"}]

我正在使用 2 个 ajax 调用创建两个系列。在第二个 ajax 调用中，我为第二个系列数据动态添加 y 轴。

$(document).ready(function() {
        function getData() {

            var chart = Highcharts.charts[0];
/* 1st Ajax Call to get the json data to plot the first series */
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/Six/TSServlet?file=ivv-sixIshareFundsHistoryIndex.json',
                data: '',
                async: false,
                success: function(data) {
                    var categories1 = [];
                    var seriesData1 = [];
                    var yaxis;
                    $.each(data, function(i, e) {
                        categories1.push(e.dt);
                        /* below step to remove , is not important, done for my program */
                        yaxis = parseFloat(e.index.replace(/,/g, '')); 
                        seriesData1.push(yaxis);
                    })
// add x-axis catagories
                    chart.xAxis[0].update({
                        categories: categories1,
                        tickInterval: 150
                    }, true);

    // add the 1st series
                    chart.series[0].setData(seriesData1);
                }
            });
               /* 2nd Ajax Call to get the json data to plot the second series */
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/Six/TSServlet?file=ivv-sixIshareFundsHistoryNav.json',
                data: '',
                async: false,
                success: function(data) {
                    var categories2 = [];
                    var seriesData2 = [];
                    var yaxis;
                    $.each(data, function(i, e) {
                        categories2.push(e.dt);
                        /* below step to remove , is not important, done for my program */

                        yaxis = parseFloat(e.nav.replace(/,/g, ''));
                        seriesData2.push(yaxis);
                    })

/*这里是问题区域，为第2系列动态添加双y轴*/

                     chart.addAxis({ // Secondary yAxis
                        id: 'NAV-Series-Axis',
                        title: {
                            text: 'NAV Series'
                        },
                        lineWidth: 2,
                        lineColor: '#08F',
                        opposite: true
                    });

// 添加第二个系列 chart.addSeries({name: "NAV Series",yAxis: 'NAV-Series-Axis',data: seriesData2});

                }
            });
        }  //getdata function ends here .............

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;

        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                renderTo: 'container',
                events: {
                    load: function() {
                        var series = this.series[0];
                        getData();
                    }
                }
            },
            title: {
                text: 'Six Share Funds History'
            },
            labels: {
                formatter: function() {
                    return this.value + ' %';
                }
            },
            xAxis: {
                tickLength: 10
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' + this.x + '<br/>' + Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                "Name": []
            }]
        });
    });
});

我的问题是我得到 2 个系列图的 2 个轴，但右侧 y 轴上没有刻度线。如何解决这个问题？理想情况下，我应该在右侧蓝色条上看到 100（一个刻度线）、200（一个刻度线）等（就像左侧 y 轴有 500,1000 等）

请看屏幕截图，我没有看到右侧蓝色条上的刻度线（用于第二系列图）

编辑添加jsp：

<div id='TimeSeriesId'>
        <div id="container" style="width: 100%; height: 600px;"></div>
    </div>

Answer 1

您可以简单地通过使 yAxis 成为一个包含 1 个以上元素的数组来添加多个 Y 轴。每个都可以具有所有常用轴属性（请参阅highcharts API）。

    yAxis: [{ // Primary yAxis
        labels: { ...
        },
        title: { ...
        },
        opposite: true
    }, { // Secondary yAxis
        title: { ...
        },
        labels: { ...
        }
    }, { // Tertiary yAxis
        title: { ...
        },
        labels: { ...
        },
        opposite: true
    }],
    ...

要动态添加它们，请使用chart.yAxis = new Array(); chart.yAxis[1].title = ... 等。