実装HighCharts

Question

https://lh6.googleusercontent.com/-eTP5pEh4kFs/T7BoGRdwlmI/AAAAAAAAAHc/AQzgo6qkBkQ/w1257-h669-k/graph.JPG

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column', 
      margin: [ 50, 50, 100, 80] 
     }, 
     title: { 
      text: 'World\'s largest cities per 2008' 
     }, 
     xAxis: { 
      categories: [ 
       'Tokyo', 
       'Jakarta', 
       'New York', 
       'Seoul', 
       'Manila', 
       'Mumbai', 
       'Sao Paulo', 
       'Mexico City', 
       'Dehli', 
       'Osaka', 
       'Cairo', 
       'Kolkata', 
       'Los Angeles', 
       'Shanghai', 
       'Moscow', 
       'Beijing', 
       'Buenos Aires', 
       'Guangzhou', 
       'Shenzhen', 
       'Istanbul' 
      ], 
      labels: { 
       rotation: -45, 
       align: 'right', 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Population (millions)' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) + 
        ' millions'; 
      } 
     }, 
      series: [{ 
      name: 'Population', 
      data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
       17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
       11.7, 11.2], 
      dataLabels: { 
       enabled: true, 
       rotation: -90, 
       color: '#FFFFFF', 
       align: 'right', 
       x: -3, 
       y: 10, 
       formatter: function() { 
        return this.y; 
       }, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }] 
    }); 
}); 

}）。

[ヘルプ] 私はHighCharts jsプラグインを使用してこれを実装できますか？すべてのコメント、アドバイスは非常に高く評価されます。

Answer 1

私はあなたが欲しいものは複数のシリーズであると推測しています。だから、「集団（集団）」、「集団（雄）」、および「集団（女性）」を配列に追加するだけでよいとしましょう。

「男性+女性=合計」の数字が加算されないという事実は無視してください。

また、結果チャートは非常に忙しいですが、私はあなたにそれを残します。通常、複数のシリーズで棒グラフを作成するときは、棒の数をかなり少なくする必要があります。それ以外の場合は、折れ線グラフや面グラフを使用する方が良いかもしれません。

しかし、これはあなたが行きたい方向を指します。

$(function() { 
    var chart; 
    $(document).ready(function() { 
    chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column', 
     margin: [ 50, 50, 100, 80] 
    }, 
    title: { 
     text: 'World\'s largest cities per 2008' 
    }, 
    xAxis: { 
     categories: [ 
      'Tokyo', 
      'Jakarta', 
      'New York', 
      'Seoul', 
      'Manila', 
      'Mumbai', 
      'Sao Paulo', 
      'Mexico City', 
      'Dehli', 
      'Osaka', 
      'Cairo', 
      'Kolkata', 
      'Los Angeles', 
      'Shanghai', 
      'Moscow', 
      'Beijing', 
      'Buenos Aires', 
      'Guangzhou', 
      'Shenzhen', 
      'Istanbul' 
     ], 
     labels: { 
      rotation: -45, 
      align: 'right', 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Population (millions)' 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.x +'</b><br/>'+ 
       'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) + 
       ' millions'; 
     } 
    }, 
     series: [{ 
     name: 'Population', 
     data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
      17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
      11.7, 11.2], 
     dataLabels: { 
      enabled: true, 
      rotation: -90, 
      color: '#FFFFFF', 
      align: 'right', 
      x: -3, 
      y: 10, 
      formatter: function() { 
       return this.y; 
      }, 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
     }, 
     { 
     name: 'Male', 
     data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
      17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
      11.7, 11.2], 
     dataLabels: { 
      enabled: true, 
      rotation: -90, 
      color: '#FFFFFF', 
      align: 'right', 
      x: -3, 
      y: 10, 
      formatter: function() { 
       return this.y; 
      }, 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
     }, 
     { 
     name: 'Female', 
     data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
      17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
      11.7, 11.2], 
     dataLabels: { 
      enabled: true, 
      rotation: -90, 
      color: '#FFFFFF', 
      align: 'right', 
      x: -3, 
      y: 10, 
      formatter: function() { 
       return this.y; 
      }, 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
     }] 
    }); 
    }); 
});