條形圖數據標籤和酒吧自定義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/

親切的問候。