highcharts可以创建这样的图表吗？

nx7onnlm 于 2023-10-20 发布在 Highcharts

关注(0)|答案(1)|浏览(192)

它非常类似于column类型的极坐标图，如this one：

但是column型极坐标图的每个轴之间有间隙。
有没有什么方法可以消除这些间隙，并保持像上图一样的笔画？
更新：
1.如何在图表中添加标签（就像风玫瑰图中的“NNE，NE，ENE”一样）？
1.如何使y轴的直线变成曲线而不是直线？（下面是我的highcharts生成的图表，它是直线）

highcharts

来源：https://stackoverflow.com/questions/77094932/can-highcharts-create-charts-like-this

1条答案

按热度按时间

pw9qyyiw1#

这样的图表可以在Highcharts中实现。
要删除间隙，可以使用pointPadding和groupPadding属性。要在点之间进行标记，您需要设置pointPlacement: 'between'。为了让刻度出现在点的上方，你需要设置一个更大的gridZIndex：

Highcharts.chart('container', {
  chart: {
    type: 'column',
    polar: true
  },
  title: {
    text: ''
  },
  legend: {
    enabled: false
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    min: 0,
    gridZIndex: 4,
    gridLineColor: 'black',
    gridLineWidth: 2,
    lineColor: 'black',
    lineWidth: 2,
    labels: {
      enabled: false
    }
  },
  yAxis: {
    min: 0,
    max: 5,
    tickInterval: 1,
    gridZIndex: 4,
    gridLineColor: 'black',
    gridLineWidth: 2,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    series: {
      pointPadding: 0,
      groupPadding: 0,
      colorByPoint: true,
      pointPlacement: 'between'
    }
  },
  series: [{
    data: [3, 5, 3, 0, 2, 0, 0, 0, 5, 2]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

Demo：https://jsfiddle.net/BlackLabel/dsqhno8m/
API：https://api.highcharts.com/highcharts/series.column.pointPadding

https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.gridZIndex

赞(0）回复(0）举报 2023-10-20