highchart 生成一个3d的柱状图

发布时间 2023-04-27 16:30:35作者: 幽冥狂_七

highchart生成一个光秃秃的柱状图

Highcharts.chart('container', {
  chart: {
    type: 'column',
    margin: 0,
    options3d: {
      enabled: true,
      alpha: 15, // 控制x轴角度
      beta: 15, // 控制y轴角度
      depth: 50, // 柱子深度
      viewDistance: 25 // 视距
    }
  },
  title: {
    text: null
  },
  xAxis: {
    visible: false
  },
  yAxis: {
    visible: false
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    column: {
      depth: 50,
      dataLabels: {
        enabled: true,
        inside: true, // 将数据标签显示在柱子内部
        style: {
          fontSize: '14px'
        },
        formatter: function() { // 设置数据标签格式为数据点的y值
          return this.y;
        }
      }
    }
  },
  series: [{
    name: 'My Data',
    data: [10, 20, 30, 40],
    colorByPoint: true // 每个柱子使用不同的颜色
  }]
});