3

highchartsドキュメントを読んでもわからなかったため、こちらで質問をさせていただきます。

Stacked and grouped columnのグラフにて次のようなグラフを作成しました。
画像の説明をここに入力

凡例のyesterday data Aをクリックし、このグラフを非表示にすると、yesterday data Bが左側にあったのに、右側へ移動してしまいます。
画像の説明をここに入力

凡例でyesterday data Aをクリックしても、yesterday data Bが左側に居続けてほしいです。

これは実現可能でしょうか。
可能な場合、方法をご教授いただけると大変助かります。

1 件の回答 1

2

Stacked and grouped column では、基本的にseriesで指定した順番に上から下、左から右、の順に積み重なります。
おそらく、現在下記のような順でseriesで指定されているかと思いますが、
yesterday data A > today data A > yesterday data B > today data B
これを、yesterday data A > yesterday data B > today data A > today data B
の順番で指定することで、お望みの結果が得られると思います。

また、以下のURLでもseries入れ替えて凡例のON/OFFで実験できます。
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped/

Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male'
  }, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female'
  }, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female'
  }]
});
.highcharts-figure,
.highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

#container {
  height: 400px;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Chart showing stacked columns with grouping, allowing specific series to be stacked on the same column. Stacking is often used to visualize data that accumulates to a sum.
  </p>
</figure>

一度お試しください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。