2017-11-28 10 views
1

Highstockで使用したいcompareオプションのため、React HighchartsからReact Highstockに切り替える必要があります。ここに私のconfigです:反応ハイストックは動作しませんが、ハイチャートが動作します

var config = { 
    credits: { 
    enabled: false 
    }, 
    title: { 
    text: '' // No Title 
    }, 
    chart: { 
    height: 200, 
    type: 'line', 
    backgroundColor: 'rgba(155, 255, 255, 0.0)' // Always transparent Background 
    }, 
    tooltip: { 
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
    valueDecimals: 2, 
    split: true 
    }, 
    yAxis: { 
    labels: { 
     format: '$ {value}' // Always Money 
    }, 
    title: { 
     text: '' // No Label 
    } 
    }, 
    xAxis: { 
    type: 'datetime', 
    labels: { 
     format: '{value:%Y\'%b}' 
    }, 
    tickInterval: getTickInterval(this.props.interval), 
    }, 
    plotOptions: { 
    series: { 
     color: transformColor(this.props.color), 
     lineWidth: 1, 
     compare: 'percent', 
     showInNavigator: true 
    }, 
    line: { 
     marker: { 
     enabled: false 
     } 
    } 
    }, 
    legend: { 
    layout:'vertical', 
    align: getLegendPosition(this.props.legend).align, 
    verticalAlign: getLegendPosition(this.props.legend).verticalAlign, 
    x: getLegendPosition(this.props.legend).x, 
    y: getLegendPosition(this.props.legend).y, 
    floating: true, 
    itemStyle: { 
     font: 'sans-serif', 
     fontWeight: 'bold', 
     fontSize: '9px' 
    }, 
    symbolHeight: 10, 
    symbolWidth: 10 
    }, 
    series: this.props.series 
}; 

return (
    <div> 
     <ReactHighcharts config={config}/> 
    </div> 
) 
} 

しかし、私はHighstockに切り替える:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Highstock.a88db6d5.jsx') is not a valid name.

任意のアイデア:

return (
    <div> 
     <ReactHighstock config={config}/> 
    </div> 
) 

それは私にエラーを与えて?

答えて

0

実際にReact-Highstock npmパッケージを使用しないでください。ちょうどこれを行う:

const ReactHighstock = require('react-highcharts/ReactHighstock');

関連する問題