我们如何在极坐标图周围添加多组刻度值?

How can we add more than one set of scale values around a polar chart?

提问人:Bender Bending 提问时间:11/16/2023 更新时间:11/16/2023 访问量:21

问:

这是我修改的照片,以参考我正在寻找的内容:enter image description here

我需要在极坐标图 Y 轴周围添加多组刻度值。

JavaScript 高图表

评论


答:

0赞 Mr. Polywhirl 11/16/2023 #1

您可以尝试将模块以及以下内容添加到您的配置中:parallel-coordinateschart

chart: {
  parallelCoordinates: true,
  parallelAxes: {
    min: 0,
    max: 10,
    tickAmount: 6
  }
}

请记住,这将标记每个 y 轴。

基于以下几点:

Highcharts.chart('container', {
    chart: {
        polar: true,
        parallelCoordinates: true,
        parallelAxes: {
          min: 0,
          max: 10,
          tickAmount: 6
        }
    },
    title: {
        text: 'Highcharts Polar Chart'
    },
    subtitle: {
        text: 'Also known as Radar Chart'
    },
    pane: {
        startAngle: 0,
        endAngle: 360
    },
    xAxis: {
        tickInterval: 45,
        min: 0,
        max: 360,
        labels: {
            format: '{value}°'
        }
    },
    yAxis: {
        min: 0,
        max: 10,
        tickInterval: 2
    },
    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },
    series: [{
        type: 'line',
        name: 'Line',
        data: [8, 7, 6, 5, 4, 3, 2, 1]
    }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.2.0/highcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.2.0/highcharts-more.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.2.0/modules/accessibility.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.2.0/modules/parallel-coordinates.min.js"></script>
<div id="container"></div>