Plot Balkendiagramm und Liniendiagramm auf separater X-Achse in Highcharts außerhalb des gemeinsamen Datensatzes

Question

Ich habe einen gemeinsamen Datensatz für Linien- und Balkendiagramme. Mit anderen Worten: Datensatz besteht aus Zeilenserien- und Balkendiagrammdatensätzen. Jetzt möchte ich das Liniendiagramm auf einer separaten X-Achse und einem Balkendiagramm auf einer separaten X-Achse darstellen. Und wollen sie beide aus dem gleichen Rahmen kontrollieren. Wie beide Tooltips für beide sollten im gleichen Popup kommen, von derselben Sektion kann ich sie zeigen und verstecken. Anbei mein Screenshot, momentan teilen sie sich die gleiche x-Achse. Ich möchte sie trennen. Hier ist mein Code.

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

Ich denke, dass Sie mehrere yAchse bei Ihrem Diagramm verwenden können. Sie können so viele yAxes hinzufügen, wie Sie möchten, und Sie können Ihre Serie mit diesen Achsen verbinden, indem Sie den Parameter yAxis: x in Ihrem Series-Objekt verwenden.

x Wert ist ein Index der spezifischen Achse in yAxis Array.

 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 
      } 
     }] 

Hier können Sie einfaches Beispiel für diese Art von Diagramm aus Highcharts Demos:

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