Question

是否可以在Highcharts中创建进度表，如下所示：

https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg

我相信可以自定义条形图来创建它。但是，是否可以更改样式以便不显示任何轴，并且条形标签位于条形图上方而不是在它们之前？

Answer 1

可以重新创建，但它不是那么动态（风格）。因此，您必须根据图表中的数据系列调整css。

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'bar',

    marginBottom: 120
  },
  legend: {
    enabled: false
  },
  colors: ['#173c64'],
  xAxis: {
    categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '],
    labels: {
      align: 'left',
      x: 5,
      y: -20, /* to be adjusted according to number of bars*/
      style: {
       fontSize: "1rem",
        color: '#000'
      }
    },
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    title: {
      enabled: false
    }

  },
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0,
    title: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      stacking: "normal",
      //groupPadding: 0, //add here
      //pointPadding: 0, //add here,
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  title: {
    margin: 0,
    useHTML: true,
    text: "Test",
    style: {
      "color": "#333333",
      "fontSize": "1.5rem",
      "fontWeight": "bold"
    }
  },

  series: [{
    data: [{
      y: 100,
      color: '#99ddff'
    }, {
      y: 10,
      color: '#ff8c1a'
    }, {
      y: 20,
      color: '#ff471a'
    }, {
      y: 60,
      color: '#c299ff'
    }, {
      y: 10,
      color: '#99ddff'
    }]
  }]
})

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts进度条形图

1 个答案: