2016-11-23 6 views
0

Ich versuche, die sekundäre Y-Achse in einem gestapelten Balkendiagramm hinzuzufügen. Ich möchte die y-Achse den angegebenen Kategorien entsprechen.Gestapeltes Balkendiagramm mit mehreren yAchsen

jsfiddle - http://jsfiddle.net/akshayasharma/qf3escqn/2/

$(function() { 
    Highcharts.chart('container', { 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Average temperature and rainfall of first quarter' 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com' 
     }, 
     xAxis: [{ 
      categories: ['Rainfall', 'Temperature'], 
      crosshair: true 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '{value}°C', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      }, 
      title: { 
       text: 'Temperature', 
       style: { 
        color: Highcharts.getOptions().colors[1] 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Rainfall', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      labels: { 
       format: '{value} mm', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     legend: { 
      align: 'center', 
      verticalAlign: 'bottom', 
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'Jan', 
      type: 'column', 
      data: [49.9, 7] 
     }, { 
      name: 'Feb', 
      type: 'column', 
      data: [71.5, 6.9] 
     }, { 
      name: 'Mar', 
      type: 'column', 
      data: [106.4, 9.5] 
     }] 
    }); 
}); 

In meinem obigen Beispiel möchte ich nur zwei gestapelte Bars-eins zeigt Niederschläge und eine andere Darstellung der Temperatur und diese gestapelten Balken sollte auf verschiedene y-Achse zugeordnet. Die Temperatur sollte die primäre y-Achse (markiert für Grad C) und die Regenfall sollte die sekundäre y-Achse (markiert für mm) einhalten.

Jeder Stapel zeigt den Wert, der dem jeweiligen Niederschlag/Temperatur des jeweiligen Monats entspricht.

Kann mir bitte jemand sagen, wie yAxis für Niederschlag und Temperatur zugeordnet wird. Da ich Serien Daten als ein Array von Serien Daten von Monaten (Jan, Feb und Mar) habe, während ich meine Yaxis spezifische zur Verfügung gestellten Kategorie, die Niederschlag und Temperatur ist.

Antwort

0

Es ist möglich, aber Sie können eine Reihe zu einer Achse zuweisen - so müssen Sie Ihre Serie teilen, wie unten:

series: [{ 
    name: 'Jan', 
    id: 'j', 
    data: [ 
    [0, 49.9] 
    ], 
    colorIndex: 0 
}, { 
    linkedTo: 'Jan', 
    data: [ 
    [1, 7] 
    ], 
    colorIndex: 0, 
    yAxis: 1 
}, { 
    id: 'f', 
    name: 'Feb', 
    data: [ 
    [0, 71.5] 
    ], 
    colorIndex: 1, 
}, { 
    linkedTo: 'f', 
    data: [ 
    [1, 6.9] 
    ], 
    colorIndex: 1, 
    yAxis: 1 
}, { 
    id: 'm', 
    name: 'Mar', 
    data: [ 
    [0, 106.4] 
    ], 
    colorIndex: 2 
}, { 
    linkedTo: 'm', 
    data: [ 
    [1, 9.5] 
    ], 
    colorIndex: 2, 
    yAxis: 1 
}] 

Beispiel: http://jsfiddle.net/qf3escqn/4/

+0

danken morganfree. Es hat mir geholfen. –

+0

Wenn es Ihr Problem löst, dann akzeptieren Sie meine Antwort, damit die Frage nicht als "offen" bleibt. – morganfree

Verwandte Themen