代码之家  ›  专栏  ›  技术社区  ›  Konstantinos Papakonstantinou

Highcharts条形图配置,增加高度和圆边

  •  0
  • Konstantinos Papakonstantinou  · 技术社区  · 7 年前

    在Angular4项目中,我使用angular2 highcharts库创建堆叠条形图。以下对象是我到目前为止的配置。

    {
      title: { text: '' },
      xAxis: {
        categories: [''],
        crosshair: true,
        visible: false
      },
      yAxis: {
        min: 0,
        max: 100,
        title: {
          text:  ''
        },
        labels: {
          enabled: true
        },
        visible: false
      },
      chart: {
        type: 'bar',
        backgroundColor: 'rgba(255, 255, 255, 0.1)'
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        column: {
          pointPadding: 0,
          borderWidth: 0,
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            formatter: function() {
              return this.point.y + '%';
            },
            inside: true
          },
          enableMouseTracking: false,
        },
        series: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            formatter: function () {
              if (this.point.y) {
                return this.point.y + '%';
              }
              return '';
            },
            style: { fontSize: '10px' },
            padding: 10
          },
          borderWidth: 0
        }
      },
      series: [{
        name: 'Pending',
        data: ...,
        color: '#ff4233'
        }, {
        name: 'Executed',
        data: ...,
        color: '#34d788'
        }, {
        name: 'Cancelled',
        data: ...,
        color: '#8f8c87'
        }]
    }
    

    enter image description here

    我需要将其转换为-> enter image description here

    正如您在预期结果中看到的,图表具有更高的高度,并且其边缘是圆形的。我不知道该怎么做。

    1 回复  |  直到 7 年前
        1
  •  1
  •   pawel_d    7 年前

    你试过使用圆角插件吗?有了它,您可以使用以下属性:

    borderRadiusTopLeft , borderRadiusTopRight , borderRadiusBottomRight borderRadiusBottomLeft

    插件参考:
    https://github.com/highcharts/rounded-corners

    例子:
    http://jsfiddle.net/3Lhzx8ao/