获取日期高图表 onChange答案

【问题标题】：Get dates highcharts onChange获取日期高图表 onChange
【发布时间】：2017-04-12 10:08:20
【问题描述】：

这是我正在使用的图表示例：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>
  );
};

最好我希望有一个函数在更改日期时触发并且可以访问“startDate”和“endDate”，但我似乎在文档中找不到任何内容。

请问有人有什么想法吗？

【问题讨论】：

标签： javascript reactjs highcharts

【解决方案1】：

使用 setExtremes - 当通过调用 .setExtremes() 方法或通过选择图表中的区域为轴设置最小值和最大值时触发。一个参数，事件，被传递给函数。这包含基于 jQuery 或 MooTools 的常见事件信息，具体取决于哪个库用作 Highcharts 的基础。

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

【讨论】：