Question

因此，我构建了一个Highcharts应用程序，看起来像这样： https://codesandbox.io/s/angular-opcho

图表如下：

export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  data1;
  data2;
  chartOptions = {
    title: {
      text: "Global temperature change"
    },
    subtitle: {
      text: "Data input from CSV"
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    series: []
  }

一个highcharts应用程序，您可以在其中上传csv数据。如果您输入的csv数据类似于以下内容：

"runs","numbers",differences
"run1","1123",21
"run2","222",7200
"run3","31112",60
"run4","412312",32

您将拥有一个带有x和y轴的漂亮图形。

现在，我想做的是为y轴建立一个范围选择器，以便我可以筛选出较高的值，并能更好地查看较低的值。

我的问题是，我只能找到与日期和时间有关的范围选择器。我的特定问题有范围选择器吗？

Answer 1

基本范围选择器使用setExtremes方法，因此您可以在yAxis上执行相同操作：

var chart = Highcharts.chart('container', {
    series: [{
        type: 'column',
        data: [1, 2, 3, 1, 3, 999, 888, 979]
    }]
});

document.getElementById('low').addEventListener('click', function() {
    chart.yAxis[0].setExtremes(0, 10);
});

document.getElementById('high').addEventListener('click', function() {
    chart.yAxis[0].setExtremes(850, 1000);
});

实时演示： http://jsfiddle.net/BlackLabel/hbf2smoc/

API参考： https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

在没有日期的Highcharts中使用RangeSelector

1 个答案: