Highcharts 极坐标图未正确连接线

Question

我在 highcharts-more 中使用极坐标选项时遇到一个非常奇怪的问题。这就是它的样子……

下面是我的完整代码（它被包裹在一个 React 组件中）

import React from 'react'
import PropTypes from 'prop-types'
import { Card, CardHeader, CardText, CircularProgress } from 'material-ui'
import ReactHighcharts from 'react-highcharts'
import HighchartsMore from 'highcharts-more'
import colors from '../../../colors'

HighchartsMore(ReactHighcharts.Highcharts)

const styles = {
  textAlignLeft: {
    textAlign: 'left'
  },
  loadingCardText: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
}

const View = ({data1, data2, data3, data4, loading, hasEtfBeenSelected, highchartsAreaThreshold}) => {
  if (!hasEtfBeenSelected) {
    return (<div />)
  }

  let config = {
    credits: false,
    chart: {
      polar: true,
      type: 'area'
    },
    title: {
      text: null
    },
    pane: {
      size: '80%',
      startAngle: 22.5
    },
    colors: [
      colors.color1, colors.color2, colors.color3, colors.color4
    ],
    xAxis: {
      categories: data1.map(x => x[0]),
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    plotOptions: {
      series: {
        threshold: highchartsAreaThreshold
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: highchartsAreaThreshold,
      startOnTick: false,
      tickAmount: 5
    },
    tooltip: {
      shared: true,
      valuePrefix: '$'
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },
    series: [
      {
        name: 'Data1',
        data: data1,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      },
      {
        name: 'Data2',
        data: data2,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      },
      {
        name: 'Data3',
        data: data3,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      },
      {
        name: 'Data4',
        data: data4,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      }
    ]
  }

  if (loading) {
    return (<div>
      <Card>
        <CardHeader title='Spreads' style={styles.textAlignLeft} />
        <CardText style={styles.loadingCardText}>
          <CircularProgress size={70} thickness={5} />
        </CardText>
      </Card>
    </div>)
  }

  return (
    <div>
      <Card>
        <CardHeader title='Spreads'
          style={styles.textAlignLeft} />
        <CardText>
          <ReactHighcharts config={config} />
        </CardText>
      </Card>
    </div>
  )
}

View.propTypes = {
  data1: PropTypes.array,
  data2: PropTypes.array,
  data3: PropTypes.array,
  data4: PropTypes.array,
  loading: PropTypes.bool,
  hasEtfBeenSelected: PropTypes.bool,
  highchartsAreaThreshold: PropTypes.number
}

export default View

highchartsAreaThreshold 设置为所有数据中的最小值（以便图表为负数据着色）。这很奇怪，因为这个确切的代码昨天确实有效。所以它是随机的。我不知道我做错了什么。

编辑：这是一些示例数据（data1..data4 看起来都是这样）：

data1:
Array[8]
0: 0.01
1: 0
2: -0.007
3: 0.014
4: -0.001
5: 0.021
6: 0
7: 0.01

data2:
Array[8]
0: 0.04
1: 0.02
2: 0.003
3: 0.031
4: -0.03
5: -0.006
6: -0.03
7: 0.04

我只是尝试使用一个简单的数组而不是建议的二维向量数组，但我得到了相同的结果。

Answer 1

你没有显示数据，所以我猜罪魁祸首是糟糕的二维数据。

根据 highcharts 文档，极坐标图适用于 1d 和 2d 数据：

如果您传递一维矢量，角度将自动递增计算（例如 [1,2,3] -> [[0,1],[a,2],[2a,3]]），其中 a 是 pointInterval，因此在这种情况下不会发生线交叉。 (*)

但是，如果您传递一个二维向量，第一个坐标将用于插入角度（例如 [[a,1],[b,2],[c,3]] -> [[0,1],[2pi*a/(a+b+c),2],...] ）；所以，如果角度没有正确排序，你可能会得到交叉线（例如，[[0,2],[2,2],[4,2],[1,3]]）。

编辑：一维数据也可以与负值交叉；显然，设置 yAxis min/max 和阈值似乎没有解决问题，因为它应该是......解决方案可能是将 yAxis:min 和阈值设置为 0 并在这种情况下手动重新缩放数据

Answer 2

请检查您的 highchartsAreaThreshold，我认为这是问题所在，比较示例：

threshold = 0.00: http://jsfiddle.net/q9th3btr/（错误，类似于你的样本）
阈值 = -0.05：http://jsfiddle.net/q9th3btr/1/（精细）

这部分代码很可能完全相同，但有些地方改变了 highchartsAreaThreshold 的计算方式并且值有误。

Answer 3

所以在调查之后，我意识到它与官方 highcharts 库无关......它实际上与 react-highcharts 库有关。违规行如下：

HighchartsMore(ReactHighcharts.Highcharts)

显然你只应该在全球范围内这样做一次，但我做了两次，每个蜘蛛图一个。这导致了这种奇怪的行为，因为我猜它是通过应用 HighchartsMore() 两次来删除 highcharts-more 功能。解决方案是在顶级 React 组件中仅运行该行一次，例如 App.js 或更高级别的组件。那就没有问题了。

谢谢大家的帮助。我的原始代码实际上是正确的。

Highcharts 极坐标图未正确连接线

Highcharts polar chart not connecting lines properly

javascript

reactjs

highcharts

react-highcharts