1

我查找了 Highcharts 的 API 参考，但找不到特定的函数来选择时间范围。

我的目的是将函数绑定到输入按钮。当我点击它时，它会选择一个范围。

我发现在 Highstock 中有一个带有内置按钮的范围选择器。

Highcharts 中是否有任何现有功能可以做到这一点？或者我如何使用自定义 javascript 来做到这一点？

4

2 回答 2

0

如果您能够使用内置范围选择器，请尝试指定selected选项 (api reference)，如下所示：

rangeSelector: {
        enabled:true, 
        buttons: [
          {type: 'week', count: 6, text: '6w'},
          {type: 'week', count: 12, text: '12w'}
        ],
        selected: 1 // uses a zero-based index
      },

如果这不适合您的需求，并且您正在从 json 读取图表数据，那么您可以尝试以下操作：

  $('#button_id_value').click(function() {
    buildChart(some_hardcoded_time_value_selection); // you will have to specify a value that matches your json data
  });


  function buildChart(selected_time_value){
    d3.json("/path/to/your/data.json", function(error, json_data) {
      if (error) return console.warn(error);

      chart_series = json_data.filter(function(d, i){
        return (selected_time_value == d["time_value"]);
      });

      $('#container').highcharts({
          chart: {type: 'column'},
          // ... more chart options ...
          series: chart_series,
          // ... more chart options ...
      });

    });
  });

仅供参考 - 最后一个解决方案需要d3和 jquery。

于 2014-02-21T20:16:39.557 回答
0

如果您想要一些简单的东西，例如通过选择图形区域而不需要用户交互的预设范围，您可以使用此链接中解释的内容。

稍微改进一下，这个想法是您的按钮处理范围所需的值并将它们提供给下面的函数。当它运行时，图表会重新绘制，反映新的范围。 

function renderGraph(xmin, xmax, ymin, ymax){
    var chart = new Highcharts.Chart({
        xAxis: {

            min: xmin,
            max: xmax               
        },
        yAxis: {
            min: ymin,
            max: ymax               
        },
        chart: {
            renderTo: "graph-container",
        },
        title: { text: null },
        credits: { enabled: false}

    });
}

希望能帮助到你。

于 2013-11-11T02:04:58.227 回答