页面初始化后,将显示所有20周的数据。

我想显示从2018week1到2018week5的图表初始化时显示的employee1和employee2的这五个星期的数据。

在X轴或Y轴上缩放时,我应该可以选择任何时间段。



var chart = null;
data1 = [1884, 2936, 2039, 1948, 1814, 2071, 2183, 3234, 3426, 2188, 1884, 2936, 2039, 1948, 1814, 2071, 2183, 3234, 3426, 2188]
data2 = [875, 694, 919, 1092, 815, 1137, 1421, 1547, 1737, 1748, 875, 694, 919, 1092, 815, 1137, 1421, 1547, 1737, 1748]
chart = Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  title: {
    text: 'Importance'
  },
  xAxis: {
    categories: ['2017week43', '2017week44', '2017week45', '2017week46', '2017week47', '2017week48', '2017week49', '2017week50', '2017week51', '2017week52', '2018week1', '2018week2', '2018week3', '2018week4', '2018week5', '2018week6', '2018week7', '2018week8', '2018week9', '2018week10']
  },
  yAxis: {
    title: {
      text: 'Importance'
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    line: {
      marker: {
        radius: 2
      },
      dataLabels: {
        enabled: true
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  },
  series: [{
      type: 'line',
      name: 'employee1',
      data: data1
    },
    {
      type: 'line',
      name: 'employee2',
      data: data2
    }
  ]
});

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<div id="container" style="min-width:400px;height:400px"></div>





现在的代码效果:
jsfiddle
javascript - 页面初始化时如何使用高位图仅显示五点数据?-LMLPHP

最佳答案

minRange设置为1,并将setExtremes()设置为所需的范围。

我还在右上方添加了两个按钮,可以根据需要更改范围。如果要选择特定范围,我认为您必须自己创建两个select并使用算法来更改范围。

编辑:添加了两个select,让用户设置范围。



var min = 10,
  max = 14;
var chart = null;
data1 = [1884, 2936, 2039, 1948, 1814, 2071, 2183, 3234, 3426, 2188, 1884, 2936, 2039, 1948, 1814, 2071, 2183, 3234, 3426, 2188]
data2 = [875, 694, 919, 1092, 815, 1137, 1421, 1547, 1737, 1748, 875, 694, 919, 1092, 815, 1137, 1421, 1547, 1737, 1748]

var weeks = ['2017week43', '2017week44', '2017week45', '2017week46', '2017week47', '2017week48', '2017week49', '2017week50', '2017week51', '2017week52', '2018week1', '2018week2', '2018week3', '2018week4', '2018week5', '2018week6', '2018week7', '2018week8', '2018week9', '2018week10']
chart = Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  title: {
    text: 'Importance'
  },
  xAxis: {
    minRange: 1,
    categories: weeks
  },
  yAxis: {
    title: {
      text: 'Importance'
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    line: {
      marker: {
        radius: 2
      },
      dataLabels: {
        enabled: true
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  },
  series: [{
      type: 'line',
      name: 'employee1',
      data: data1
    },
    {
      type: 'line',
      name: 'employee2',
      data: data2
    }
  ],
  exporting: {
    buttons: {
      moveRight: {
        text: '>>',
        onclick: function(){
          var canShift = max < 19
          max = canShift ? max + 1 : max;
          min = canShift ? min + 1 : min;
          chart.xAxis[0].setExtremes(min, max)
        }
      },
      increasePeriod: {
        text: '+',
        onclick: function() {
          max = max < 19 ? max + 1 : max;
          chart.xAxis[0].setExtremes(min, max)
        }
      },
      decreasePeriod: {
        text: '-',
        onclick: function() {
          max = max > min ? max - 1 : max
          chart.xAxis[0].setExtremes(min, max)
        }
      },
      moveLeft: {
        text: '<<',
        onclick: function() {
          var canShift = min > 0
          min = canShift ? min - 1 : min;
          max = canShift ? max -1 : max;
          chart.xAxis[0].setExtremes(min, max)
        }
      }
    }
  }
});

$.each(weeks, function(index, week){
  $('<option>', {
    value: index,
    text: week
  }).appendTo($('select'))
})

$('select').on('change', function(){
  min = parseInt($('#start').val());
  max = parseInt($('#end').val());
  if(min > max){
     max = min
     $('#start').val(min)
     $('#end').val(max)
  }
  chart.xAxis[0].setExtremes(min, max)
})

$('#start').val(min)
$('#end').val(max).trigger('change')

chart.showResetZoom();

#container {
  height: 400px;
}

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<div id="container"></div>
<div id="rangeSelector">
  <select id="start"></select>
  <select id="end"></select>
</div>

关于javascript - 页面初始化时如何使用高位图仅显示五点数据?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50057627/

10-12 12:53
查看更多