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

Note: I have modified my answer to better address the specific requests in the original poster's question.

我的建议是:

创建一个堆积柱形图，其中一个系列是用户无法与之交互的“虚拟”系列。这将作为您的背景。

这是我根据 Highcharts 堆叠列演示制作的一个快速 fiddle :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] }
]

如果对您有帮助，请告诉我!