Highcharts - 柱形圖自定義

Question

我正在使用Highcharts庫創建柱形圖。 我正在嘗試根據我的要求定制柱形圖，但我無法做兩件事。 首先，柱形圖的底部邊框和第二個是所有系列的列背景。 看下面的圖片，我需要實現的目標。

到目前為止我所做的是： jsfiddle

jQuery(document).ready(function(jQuery) {

          jQuery('#portlet-content').highcharts({
        credits: {
            enabled: false
        },
        exporting: {
          enabled: false
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Number of Applications'
        },
        subtitle: {
            text: 'BY COUNTRY'
        },
        xAxis: {
          visible: false
        },
        yAxis: {
            visible: false
        },
        legend: {
            enabled: true,
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical',
            padding: 3,
            itemMarginTop: 5,
            itemMarginBottom: 5,
            itemStyle: {
                lineHeight: '14px'
            },
            symbolHeight: 12,
            symbolWidth: 12,
            symbolRadius: 6
        },
        tooltip: {
            formatter: function() {
                                return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
                            },
            useHTML: true,
            borderWidth: 0,
            style: {
                padding: 0,
                fontSize: '16px'
            },
            shadow: false
        },
        series: [
            {
              name: "United Kingdom",
              color: '#32323A',
              data: [
                  [294]
              ]
            }, {
              name: "USA",
              color: '#EB4825',
              data: [
                  [65]
              ]
            }
            , {
              name: "United Arab Emirates",
              color: '#F7CC1E',
              data: [
                  [35]
              ]
            }
            , {
              name: "India",
              color: '#24C746',
              data: [
                  [23]
              ]
            }
            , {
              name: "Canada",
              color: '#2587EC',
              data: [
                  [18]
              ]
            }
        ]
      });

    });

Answer 1

注意：我已經修改了我的答案，以便更好地解決原始海報問題中的具體要求。

這是我的建議：

創建堆積柱形圖，其中一個系列是“虛擬”系列，用戶無法與之交互。 這將作為您的背景。

這是我根據Highcharts堆疊列演示編寫的一個快速小提琴： http ： //jsfiddle.net/brightmatrix/v97p3eam/

plotOptions: {
    column: { stacking: 'percent' }
},
series: [
    /* this is the "dummy" series
       set the "showInLegend" and "enableMouseTracking" attributes 
       to "false" to prevent user interaction */
    { name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray', 
              showInLegend: false, enableMouseTracking: false }, 
    /* here's the real data; set a unique color for each
       set nulls for the columns where that color/data is not needed */
    { name: 'Series 1', color: 'red', data: [2,null,null,null,null] }, 
    { name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
    { name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
    { name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
    { name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]

如果這對您有幫助，請告訴我們！