为什么我的极坐标图显示为折线图? (Highcharts最新版本)

问题描述 投票:0回答:1

我在网上遵循了一些说明和教程,但未能创建极坐标图。

它以正常的折线图结束。

我的代码怎么了?有提示吗?

谢谢,

  Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    pane: {
      size: '95%'
    },
    chart: {
      type: 'area',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["John","Weta","Marry"],
      tickmarkPlacement: 'on',
      lineWidth: 2,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 2,
      min: 0,
      max: 100,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    plotOptions: {
      series: {
        borderWidth: 4,
        borderColor: '#a00'
      }
    },
    series: [{
      data: [68,97,964]
    }]
  })
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
highcharts
1个回答
0
投票

您需要包括highchart更多的库才能获得极坐标图

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

Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    pane: {
      size: '95%'
    },
    chart: {
      type: 'area',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["John","Weta","Marry"],
      tickmarkPlacement: 'on',
      lineWidth: 2,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 2,
      min: 0,
      max: 100,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    plotOptions: {
      series: {
        borderWidth: 4,
        borderColor: '#a00'
      }
    },
    series: [{
      data: [68,97,964]
    }]
  })
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px"></div>
© www.soinside.com 2019 - 2024. All rights reserved.