在Highcharts中設置列位置

我正在構建一個列圖表，其中1個系列與其他（2）系列重疊。爲了更好的理解，我附上了一張圖片。在Highcharts中設置列位置

感謝您的幫助！

enter image description here

來源

2013-07-11 user2345998

截圖中的圖表是使用「pointWidth」和「groupPadding」創建的 - 但這隻適用於無法調整大小的「靜態」圖表。調整顯示的圖表將破壞佈局... – user2345998

如果您發佈了一些代碼和顯示問題的jsfiddle，您將獲得更多幫助。 – SteveP

像這樣是可能的，看看：http://jsfiddle.net/rLskooht/

組：分組：假，zIndex的：（例如）10，pointPadding：0.3對頂部系列
第一系列應該一會就頂

代碼：

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 
    xAxis: { 
     categories: ['cat1', 'cat2'] 
    }, 
    series: [{ 
     grouping: false, 
     data: [70, 50], 
     pointPadding: 0.3, 
     zIndex: 10 
    },{ 
     data: [123, 100]   
    },{ 
     data: [100, 90]   
    }] 
});

來源

2013-07-12 10:37:09

太好了，非常感謝！ – user2345998

是的！有一種方法可以根據每個酒吧的自定義位置來做到這一點，如果上面這個簡單但優雅的解決方案不夠好，未來的用戶可能需要這樣做。

http://www.highcharts.com/demo/column-placement

代碼：

注意根據pointPosition和pointPadding選項的百分比。

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Efficiency Optimization by Branch' 
     }, 
     xAxis: { 
      categories: [ 
       'Seattle HQ', 
       'San Francisco', 
       'Tokyo' 
      ] 
     }, 
     yAxis: [{ 
      min: 0, 
      title: { 
       text: 'Employees' 
      } 
     }, { 
      title: { 
       text: 'Profit (millions)' 
      }, 
      opposite: true 
     }], 
     legend: { 
      shadow: false 
     }, 
     tooltip: { 
      shared: true 
     }, 
     plotOptions: { 
      column: { 
       grouping: false, 
       shadow: false, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: 'Employees', 
      color: 'rgba(165,170,217,1)', 
      data: [150, 73, 20], 
      pointPadding: 0.3, 
      pointPlacement: -0.2 
     }, { 
      name: 'Employees Optimized', 
      color: 'rgba(126,86,134,.9)', 
      data: [140, 90, 40], 
      pointPadding: 0.4, 
      pointPlacement: -0.2 
     }, { 
      name: 'Profit', 
      color: 'rgba(248,161,63,1)', 
      data: [183.6, 178.8, 198.5], 
      tooltip: { 
       valuePrefix: '$', 
       valueSuffix: ' M' 
      }, 
      pointPadding: 0.3, 
      pointPlacement: 0.2, 
      yAxis: 1 
     }, { 
      name: 'Profit Optimized', 
      color: 'rgba(186,60,61,.9)', 
      data: [203.6, 198.8, 208.5], 
      tooltip: { 
       valuePrefix: '$', 
       valueSuffix: ' M' 
      }, 
      pointPadding: 0.4, 
      pointPlacement: 0.2, 
      yAxis: 1 
     }] 
    }); 
});

來源

2015-02-09 22:46:20

在Highcharts中設置列位置

回答

相關問題