Highstock.js:无法创建具有两个堆积柱形图的多窗格图表，一个是“正常”，另一个是“百分比”

Highstock.js: Not able to create multi pane chart with two stacked column charts, one "normal" and the other "percent"

本文关键字：百分比 另一个 一个 正常 柱形图 创建 js Highstock 两个      更新时间：2023-09-26

我正在尝试创建一个多窗格图表(就像这个 http://www.highcharts.com/stock/demo/candlestick-and-volume(，上面的是"普通"堆积柱形图，下面的是"百分比"堆积柱形图。但我只能让它既"正常"又"百分比"，这不是我想要的。尝试了几种情节选项的组合，但无法使其正常工作。这是小提琴(http://jsfiddle.net/abhikgo/59k90959/3/(：TIA。

var chartData = {"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
             "bbbBBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
             "bbb":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
             "BBB":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
             "CCC":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
             "DDD":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]};

var $chart = $('#chartArea').highcharts('StockChart', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'datetime',
    },
    yAxis: [{
        title: {
            text: "Normal Statcking"
        },
        opposite: false,
        height: "65%"
    }
    ,{
        title: {
                text: "% Stacking"
        },
        opposite: false,
        height: "65%",
        top: '65%',
        height: '35%',
        offset: 0
    }
    ],
    plotOptions: {
        column: {stacking: 'normal'}
    },
    series: [{
                type: 'column',
                name: 'AAA',
                data: chartData.AAA
            },
            {
                name: 'bbbBBB',
                data: chartData.bbbBBB
            },
            {
                name: 'CCC',
                data: chartData.CCC
            },
            {
                name: 'DDD',
                data: chartData.DDD
            },
            {
                name: 'bbb',
                data: chartData.bbb,
                yAxis: 1,
                plotOptions: {
                    column: {
                        stacking: 'percent'
                    }
                }
            },
            {
                name: 'BBB',
                data: chartData.BBB,
                yAxis: 1,
                plotOptions: {
                    column: {
                        stacking: 'percent'
                    }
                }
            }
            ]
});

问题是您尝试为每个特定系列设置stacking的方式，这是正确的方法：

{
    name: 'bbb',
    data: chartData.bbb,
    yAxis: 1,
    stacking: 'percent'
}, {
    name: 'BBB',
    data: chartData.BBB,
    yAxis: 1,
    stacking: 'percent'
}

观看演示：http://jsfiddle.net/59k90959/4/

解决方案

我找不到与库进行两次聊天的方法，所以我自己计算了百分比并将它们作为单独的系列插入。唯一的问题是正确格式化工具提示。

var chartData = {
  "AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
  "BBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
  "CCC":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
  "DDD":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
  "EEE":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
  "FFF":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]
};
var sumData = [];
$.each(chartData, function(i){
  $.each(chartData[i], function(j){
    if(!sumData[j]) sumData[j] = 0;
    sumData[j] += this[1];
  });
});
var percentData = {};
$.each(chartData, function(i){
  percentData[i] = [];
  $.each(chartData[i], function(j){
    percentData[i][j] = [this[0], this[1]/sumData[j]];    
  });
});
var $chart = $('#chartArea').highcharts('StockChart', {
  chart: { type: 'column' },
  plotOptions: { column: {stacking: 'normal'} },
  tooltip: {
    
    formatter: function(){
      console.log(this);
      var s = '<span style="font-size: 10px">'+
           Highcharts.dateFormat('%A, %b %d, %Y',this.x)+
           '</span><br/>';
      for(var i = 0; i < sumData.length - 1; i++) {
        s += '<br/>' + '<span style="color: ' +
          this.points[i].series.color+'">'u25CF</span>' +
          this.points[i].series.name + ': ' +
          this.points[i].y + 'm ' + 
          this.points[i].percentage.toFixed(1) + '%';
      }
      return s;
   }
    
  },  
  xAxis: { type: 'datetime', },
  yAxis: [
    {//normal
      title: {
        text: "Normal Statcking"
      },
      opposite: false,
      height: "50%"
    },
    {//percent
      title: {
        text: "% Stacking"
      },
      opposite: false,
      top: '50%',
      height: '50%',
      offset: 0
    }
  ],  
  series: [    
    {//normal
      name: 'AAA',
      data: chartData.AAA
    },{
      name: 'BBB',
      data: chartData.BBB
    },{
      name: 'CCC',
      data: chartData.CCC
    },{
      name: 'DDD',
      data: chartData.DDD
    },{
      name: 'EEE',
      data: chartData.EEE
    },{
      name: 'FFF',
      data: chartData.FFF
    },    
    {//percent
      name: 'pAAA',
      data: percentData.AAA,
      yAxis: 1
    },{
      name: 'pBBB',
      data: percentData.BBB,
      yAxis: 1
    },{
      name: 'pCCC',
      data: percentData.CCC,
      yAxis: 1
    },{
      name: 'pDDD',
      data: percentData.DDD,
      yAxis: 1
    },{
      name: 'pEEE',
      data: percentData.EEE,
      yAxis: 1
    },{
      name: 'pFFF',
      data: percentData.FFF,
      yAxis: 1
    }
  ]
});                       
<!DOCTYPE html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="chartArea"></div>
  </body>
</html>

相关文章：