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

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

Answer 1

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

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

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

Answer 2

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

HighchartsMore(ReactHighcharts.Highcharts)

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

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

Answer 3

你没有显示数据所以我猜测罪魁祸首是坏的2d数据。

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

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

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

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

Highcharts极坐标图没有正确连接线

3 个答案: