Как использовать высокие графики для отображения данных только пяти точек при инициализации страницы?

Question

При инициализации страницы отображаются данные за все 20 недель.

Я хочу отобразить с 2018 недели по 2018 недели 5, эти данные за пять недель для 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

Answer 1

Установите minRange на 1 и setExtremes() на нужный диапазон.

Я также добавил две кнопки в правом верхнем углу, чтобы изменить диапазон, как вы хотите. Если вы хотите выбрать определенный диапазон, я думаю, вам нужно создать два select s самостоятельно и алгоритм для изменения диапазона.

Редактировать: Добавлено два 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>

Answer 2

Вы можете сделать это, позвонив setExtremes() после инициализации графика, например:

var maxValue = chart.xAxis[0].getExtremes().max
var minValue = maxValue - 4
chart.xAxis[0].setExtremes(minValue, maxValue, true)
chart.showResetZoom();

И установка minRange из xAxis:

xAxis: {
  minRange: 4,
  ...
}

Я также позвонил showResetZoom, что позволит пользователю увидеть кнопку «сбросить зум».

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'],
    minRange: 4
  },
  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
    }
  ]
});

var maxValue = chart.xAxis[0].getExtremes().max
var minValue = maxValue - 4
chart.xAxis[0].setExtremes(minValue, maxValue, true)
chart.showResetZoom();

<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: https://jsfiddle.net/ewolden/wyp8Lfx0/1/