react-highcharts alignThreshold

Question

我剛把我的應用程序變成一個反應前端，我有一些圖形組件。 我需要將Thresholds設置爲true，並使用TorsteinHønsi的實驗腳本。 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/alignthresholds/

有沒有簡單的方法來整合這個腳本？

import React from 'react' 
import ReactHighcharts from 'react-highcharts/bundle/ReactHighcharts'; 

class Graphing extends React.Component { 
    constructor(props) { 
    super(props) 
    this.graphConfig = this.graphConfig.bind(this); 
    } 

    render(){ 
    console.log(this.props); 
    if(this.props.active){ 
     return (<ReactHighcharts config = {this.graphConfig()}></ReactHighcharts>) 
    }else{ 
     return (<div>Click a row to get the Graph</div>) 
    } 
    } 

    graphConfig(){ 
    return { 
     title:{ 
      text:'' 
      }, 
      subTitle:{ 
      text:'' 
      }, 
      chart: { 
      alignThresholds: true, 
      height:this.props.height, 
      events: { 
       load: function() { 
        //addPlotBandsToWeekends(); 
        }, 
      }, 
      }, 
      xAxis: { 
      type: 'datetime', 
      min: this.props.startDate, 
      max: this.props.endDate 
      }, 
      yAxis: [{ 
      title: { 
       text: 'USD($)', 
      }, 
      opposite: true 
      },{ 
      title: { 
       text: 'Visits', 
      }, 
      opposite: false 
      }], 
      tooltip: { 
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b></span><br/>', 
      valuePrefix: '{series.options.unit}', 
      shared: true 
      }, 
      legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
      }, 
      series: [{ 
      name: 'Profit', 
      yAxis: 0, 
      data: this.props.data.map(function(item){return([item.end_time,item.profit])}), 
      color: "rgb(132, 195, 51)", 
      unit: "$" 
      }, 
     { 
     name: 'Cumulative Profit', 
     yAxis: 0, 
     data: this.props.data.map(function(item){return([item.end_time,item.cumulativeProfit])}), 
     color: "rgb(0, 255, 36)", 
     unit: "$", 
     visible: false 
     }, 
     { 
     name: 'Revenue', 
     data: this.props.data.map(function(item){return([item.end_time,item.revenue])}), 
     color: "rgb(255, 158, 53)", 
     unit: "$" 
     }, 
     { 
     name: 'Cumulative Revenue', 
     data: this.props.data.map(function(item){return([item.end_time,item.cumulativeRevenue])}), 
     color: "rgb(255, 200, 100)", 
     unit: "$", 
     visible: false 
     }, 
     { 
     name: 'Cost', 
     data: this.props.data.map(function(item){return([item.end_time,item.cost])}), 
     color: "rgb(232, 79, 54)", 
     unit: "$" 
     }, 
     { 
     name: 'Cumulative Cost', 
     data: this.props.data.map(function(item){return([item.end_time,item.cumulativeCost])}), 
     color: "rgb(255, 10, 75)", 
     unit: "$", 
     visible: false 
     }, 
     { 
     name: 'Visits', 
     yAxis: 1, 
     data: this.props.data.map(function(item){return([item.end_time,item.visits])}), 
     color: "rgb(86, 60, 119)", 
     unit: "" 
     }, 
     { 
     name: 'Cumulative Visits', 
     yAxis: 1, 
     data: this.props.data.map(function(item){return([item.end_time,item.cumulativeVisits])}), 
     color: "rgb(255, 47, 218)", 
     unit: "", 
     visible: false 
     }, 
     { 
     name: 'Conversions', 
     yAxis: 1, 
     data: this.props.data.map(function(item){return([item.end_time,item.conversions])}), 
     color: "rgb(44, 167, 227)", 
     unit: "" 
     }, 
     { 
     name: 'Cumulative Conversions', 
     yAxis: 1, 
     data: this.props.data.map(function(item){return([item.end_time,item.cumulativeConversions])}), 
     color: "rgb(50, 100, 200)", 
     unit: "", 
     visible: false 
     }] 
    }; 

    } 
} 

export default Graphing; 

Answer 1

插件應該可以正常工作，您只需要傳遞react-highcharts使用的Highcharts實例。

它暴露爲ReactHighcharts.Highcharts，這就是你應該傳遞給插件（參見jsfiddle中的第59行）。