Question

我需要将条形图更改为如下所示。

以下是需要全部填写的要求。

在左右两侧留有间距的圆形栏
灰色背景
数据标签如图所示（右侧栏）。

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

谢谢

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样式格式化，您必须编写逻辑以查找xAxis的最大值并应用该cooridinate就像

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

您可以通过提供

格式化dataLabel

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

Answer 2

对于圆角柱角，您可以使用圆角插件。您可以在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

您可以格式化“背景系列”的数据标签，以便显示正常系列的值： 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.style来格式化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/

亲切的问候。

条形图数据标签和酒吧自定义css与酒吧背景，Highchart

2 个答案: