48826


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

Stacked and grouped columnのグラフにて次のようなグラフを作成しました。  
[![画像の説明をここに入力](https://i.stack.imgur.com/llcsu.png)](https://i.stack.imgur.com/llcsu.png)

凡例のyesterday data Aをクリックし、このグラフを非表示にすると、yesterday data
Bが左側にあったのに、右側へ移動してしまいます。  
[![画像の説明をここに入力](https://i.stack.imgur.com/6nOjC.png)](https://i.stack.imgur.com/6nOjC.png)

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

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


CC BY-SA 4.0
2018-09-04T07:40:21.877
48071
2019-12-13T13:44:32.817
12388
question
javascript highcharts
highcharts Stacked and grouped column, 凡例操作によるグラフ位置の動的変更をやめたい


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/>

[code]

    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'
      }]
    });
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]

一度お試しください。


CC BY-SA 4.0
2018-09-29T11:29:47.810
48826
2019-12-13T13:44:32.817
2019-12-13T13:44:32.817
32986
29191
48071
answer