Highcharts極座標圖不能正確連線

Question

我在使用highcharts-more中的極座標選項時出現了一個很奇怪的問題。這是什麼樣子......

下面是我完整的代碼（它被包裹在一個陣營組件）

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

因此，經過調查，我意識到它與官方的highcharts圖書館沒有任何關係......它實際上與react-highcharts圖書館有關。違規的行如下：

HighchartsMore(ReactHighcharts.Highcharts)

顯然，你只應該做一次全球，但我做了兩遍，每一個網狀圖。這是造成這種奇怪的行爲，因爲我猜它通過兩次應用HighchartsMore()刪除highcharts-more功能。解決方法是隻在App.js或其他高級反應組件中運行一次該行。那麼就沒有問題了。

謝謝大家的幫助。我的原始代碼實際上是正確的。

Answer 2

你沒有顯示數據，所以我猜猜罪魁禍首是糟糕的二維數據。

根據highcharts DOC，極性圖表工作都與一維和二維數據：

如果傳遞1D向量的角度會自動計算和增量（例如[1,2,3] - >[[0,1],[a,2],[2a,3]]。）其中，a是pointInterval （*）

但是，如果你通過一個2D矢量，第一個座標將用於插入角度（例如類似於[[a,1],[b,2],[c,3]] - >[[0,1],[2pi*a/(a+b+c),2],...]）;所以，如果角度沒有正確排序，最終可能會出現交叉線（例如，[[0,2],[2,2],[4,2],[1,3]]）。

編輯：1d數據也可以與負值交叉;顯然，設置yAxis最小/最大值和閾值似乎沒有解決問題，因爲它應該是...解決方案可能是設置yAxis：min和thresold爲0，並在這種情況下手動重新調整數據

Answer 3

請檢查您的highchartsAreaThreshold，我覺得這個問題，比較的例子：

• 閾值= 0.00：http://jsfiddle.net/q9th3btr/（錯誤，類似於你的樣品）
• 閾值= -0.05：http://jsfiddle.net/q9th3btr/1/（精）

最有可能這個標準t的代碼是完全一樣的，但是有些東西改變了highchartsAreaThreshold的計算方式並且有錯誤的值。