javascript - 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

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

• 阈值 = 0.00: http://jsfiddle.net/q9th3btr/ (错误，与您的示例类似)
• 阈值 = -0.05: http://jsfiddle.net/q9th3btr/1/ (很好)

很可能这部分代码是完全相同的，但是某些内容改变了 highchartsAreaThreshold 的计算方式并具有错误的值。