条形图数据标签和酒吧自定义CSS酒吧背景，高图

Question

我有一个要求，改变我的条形图看起来像下面的东西。

以下是这必须是满打满要求。

1. 圆形棒与作为图像中示出左和右
2. 灰色背景
3. 数据标签（右侧上巴）的间距。

当前版本（单日期，多日期）如下。

感谢

Answer 1

1）对于圆角，可以使用

series: [{ 
     data: [Some_Sequence_of_Data], 
     borderRadiusTopLeft: 10, 
     borderRadiusTopRight: 10, 
     borderRadiusBottomRight: 10, 
     borderRadiusBottomLeft: 10 
    }] 

2）对于背景在酒吧线

xAxis: { 
      gridLineColor: '#ebeff2', 
      gridLineWidth: 10, 
      tickPixelInterval: 1 
     } 

3）dataLabel样式格式，您必须编写逻辑来寻找x轴的最大值，通过提供

plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        style: { 
         //Your own style 
        } 
       } 
      } 
     } 

Answer 2

对于圆角列角应用该cooridinate就像

this.series.chart.options.plotOptions.bar.dataLabels.x -= maxValue; 

可以格式化dataLabel你可以使用圆角插件。您可以在Highcharts网站上找到关于此插件的信息： http://www.highcharts.com/plugin-registry/single/5/Rounded-Corners

为了您的背景，您可以使用不同颜色的新色谱柱系列。您可以使用Highcharts API中的参数，例如分组showInLegend将本系列样式设置为背景。你可以在这里找到有关此参数的信息：

http://api.highcharts.com/highcharts#plotOptions.bar.grouping http://api.highcharts.com/highcharts#plotOptions.bar.enableMouseTracking http://api.highcharts.com/highcharts#plotOptions.bar.showInLegend

您可以格式化你的背景系列“的dataLabels所以它会显示值正常的系列： http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.formatter

formatter: function() { 
      var series = this.series.chart.series[1]; 
      return series.options.data[this.point.index]; 
     } 

如果您希望背景列的图表宽度为100％，您可以将yAxis.max设置为其值。

您可以使用dataLabels.backgroundColor，dataLabels.borderRadius，dataLabels.shape和dataLabels。格式化您的dataLabels风格： http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.backgroundColor http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.borderRadius http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.shape http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.style

在这里你可以看到一些简单的代码，让你的图表：

$('#container').highcharts({ 
    chart: { 
     type: 'bar', 
     marginLeft: 100, 
     marginRight: 100 
    }, 
    xAxis: { 
     visible: false, 
    }, 
    yAxis: { 
     min: 0, 
     max: 10, 
     gridLineWidth: 0, 
    }, 
    plotOptions: { 
     bar: { 
     dataLabels: { 
      backgroundColor: '#000', 
      shape: 'circle', 
      padding: 8, 
      color: 'white', 
      style: { 
      "textShadow": "0 0 2px black, 0 0 2px black" 
      } 
     } 
     } 
    }, 
    series: [{ 
     data: [10, 10, 10, 10, 10], 
     showInLegend: false, 
     animation: false, 
     grouping: false, 
     borderRadiusTopLeft: 7, 
     borderRadiusTopRight: 7, 
     borderRadiusBottomRight: 7, 
     borderRadiusBottomLeft: 7, 
     pointWidth: 15, 
     enableMouseTracking: false, 
     color: '#aaa', 
     dataLabels: { 
     enabled: true, 
     x: 20, 
     formatter: function() { 
      var series = this.series.chart.series[1]; 
      return series.options.data[this.point.index]; 
     } 
     } 
    }, { 
     name: 'normal series', 
     data: [9, 7, 4, 7, 3], 
     color: 'orange', 
     borderRadiusBottomRight: 7, 
     borderRadiusBottomLeft: 7, 
     pointWidth: 15, 
    }] 
    }); 

在这里你可以看到一个例子，如何它可以工作： http://jsfiddle.net/8va9p7p9/4/

亲切的问候。