日付highchartsはここ

Question

をONCHANGE取得私が使用しているグラフの例である：私は日付が変更（一番下にドラッグ可能範囲とするか、手動のどちらかであるときに更新する必要がテーブルを持っている、それ以下はhttp://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/basic-line/

をこの例では示されていない入力ボックスに入力される）。

ここ

const PageLineChart = props => { 
    let data = []; 
    const { title, 
      heading, 
      subtitle, 
      legend, 
      defaultRange, 
      xLabel, 
      yLabel 
      } = props.column; 

    var selected; 

    defaultRange 
    ? selected = ['1m', '3m', '6m', 'ytd', '1y', 'all'].indexOf(defaultRange) 
    : selected = 3; 

    const series = props.column.values.map(field => { 
    return { 
     name: field, 
     data: [], 
     tooltip: { 
     valueDecimals: 2 
     } 
    }; 
    }); 

    props.data.map((row, index) => { 
    const timeStamp = moment(row[props.column.category]).unix() * 1000; 

    props.column.values.forEach((field, index) => { 
     series[index].data.push([timeStamp, Number(row[field])]); 
    }); 
    }); 

    data.reverse(); 

    const chartConfig = { 
    rangeSelector: { 
     selected 
    }, 
    credits: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    title: { 
     text: title 
    }, 
    subtitle: { 
     text: subtitle 
    }, 
    xAxis: { 
     title: { 
     text: xLabel || '' 
     } 
    }, 
    yAxis: { 
     title: { 
     text: yLabel || '' 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
     var s = '<span style="font-size: 10px">' + moment(this.x).format('MMMM Do YYYY') + '</span><br/>'; 
     for (var i = 0; i < this.points.length; i++) { 
      var prefix = ''; 
      if (props.column.hasOwnProperty('format')) { 
      prefix = formatNumber(this.points[i].y, props.column.format); 
      } else { 
      prefix = formatNumber(this.points[i].y); 
      } 
      var myPoint = this.points[i]; 
      s += '<br/><span style="color:' + 
      myPoint.series.color + 
      '">\u25CF</span> ' + 
      capitalize(myPoint.series.name) + ': '; 
      /* Need to check whether or not we are dealing with an 
      * area range plot and display a range if we are 
      */ 
      if (myPoint.point.low && myPoint.point.high) { 
      s += myPoint.point.low + ' - ' + myPoint.point.high; 
      } else { 
      s += prefix; 
      } 
     } 
     return s; 
     } 
    }, 
    plotOptions: { 
     series: { 
     animation: true 
     } 
    }, 
    shared: true, 
    series: series 
    }; 

    return (
    <div className="panel panel-default no-bg b-a-2 b-gray-dark"> 
     <div className="panel-heading"> 
     {heading} 
     </div> 
     <div className="panel-body"> 
     <HighStock config={chartConfig} /> 
     </div> 
    </div> 
); 
}; 

チャートに関する私のdummiedダウンのコードは好ましく私は火災が日付を変更する機能が好きで、「たstartDate」へのアクセスと「endDateに」を持っていますが、私はように見えることはできませんでしょうですドキュメント内の何かを見つける。

誰にもご意見はありますか？

Answer 1

use setExtremes - .setExtremes（）メソッドを呼び出すか、グラフ内の領域を選択して軸の最小値と最大値が設定されたときに発生します。 1つのパラメーターeventが関数に渡されます。これには、ハイチャートのベースとして使用されるライブラリに応じて、jQueryまたはMooToolsに基づく共通のイベント情報が含まれます。

Highcharts.stockChart('container', { 
    xAxis: { 
     events: { 
      setExtremes: function (e) { 
       $('#report').html('<b>Set extremes:</b> e.min: ' + Highcharts.dateFormat(null, e.min) + 
        ' | e.max: ' + Highcharts.dateFormat(null, e.max) + ' | e.trigger: ' + e.trigger); 
      } 
     } 
    }, 
    rangeSelector: { 
     selected: 1 
    }, 
    series: [{ 
     name: 'USD to EUR', 
     data: usdeur 
    }] 
}); 

reference

Example demo