Question

我有线系列和条形图的通用数据集。换句话说，数据集包括线系列数据集和条形图数据集。现在我想在单独的x轴和单独的x轴上的条形图上绘制线系列图。并希望从同一帧控制它们。就像两个工具提示都应该出现在同一个弹出窗口中一样，我可以显示和隐藏它们。附上我的截图，目前他们共享相同的x轴。我想把它们分开。这是我的一段代码。

for(j=0; j<timelinejson.length; j++){ 
     seriesOptions[j] = {
            //name: selectedMarkers[i],
            name: timelinejson[j].marker_desc,
            data: mData,

            marker : {
                enabled : true,
                radius : 3
            },
            type : 'spline',
            tooltip : {
                valueDecimals : 2
            }
        };
   }
        seriesOptions[10] = {
            name: 'Speed',
            data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],

            type: 'column',
            valueDecimals: 1

        };  
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {

  $('#trendChart'+temp).highcharts('StockChart', {

        chart: {
                    height: 400
                    //width: 500    
                },      
                rangeSelector: {
                    selected: 4
                },

                yAxis: {
                    /*labels: {
                        formatter: function () {
                            return (this.value > 0 ? ' + ' : '') + this.value + '%';
                        }
                    },*/
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    }]
                },
                legend: {
                    enabled: true,
                    align: 'right',
                    verticalAlign: 'top',
                    layout: 'vertical',
                    x: 0,
                    y: 100
                },
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
                    valueDecimals: 2
                },

                series: marker_array_main

            });

}

Answer 1

我认为您可以在图表中使用多个yAxis。您可以根据需要添加任意数量的yAx，并且可以使用Series对象中的yAxis：x参数将系列与此轴连接。

x value是yAxis数组中特定轴的索引。

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '60%',
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],


        series: [{
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
                units: groupingUnits
            }
        }]

在这里，您可以从Highcharts演示中找到此类图表的简单示例：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

在公共数据集中的Highcharts中的单独x轴上绘制条形图和线系列图

1 个答案: