Highstock / chart — on изменение размера, не обрезать диаграмму

Как удержать диаграмму от обрезки при изменении размера, а вместо этого просто изменить ее видовое окно ?

Я считаю, что это немного трудно объяснить, поэтому, пожалуйста, дайте мне знать, если больше объяснений необходимо.

График на первом скриншоте выглядит красиво, между ними нормальное расстояние, а бары не обрезаны. Это одно имеет ширину 1000px.

Окно диаграммы широко

На втором скриншоте диаграмма имеет ширину всего 300px, а подсвечники становятся «обрезанными»..

Окно диаграммы обрезано

Вместо этого я хотел бы только изменить видовой экран, так что бары никогда не обрезаются и всегда одного размера.. Изменяется только диапазон дат (видовой экран).. Вы видите больше баров на более широком графике, но это не означает, что сами бары должны расти или уменьшаться.

Я пробовал его с помощью простого алгоритма, но он очень склонен к ошибкам.

    let parentW = this._elementRef.nativeElement.parentNode.clientWidth,
        data = this.chart.xAxis[0].series[0].data,
        barW = 10,
        barsToShow = Math.ceil(parentW / barW),
        firstBar = (data[data.length - barsToShow] || data[0]),
        lastBar = data[data.length - 1];

    this.chart.xAxis[0].setExtremes(firstBar.x, lastBar.x, redraw);

Я не мог найти никаких настроек в Highcharts doc, и google тоже не очень помог. Большое спасибо

1 ответ

  1. Желаемое поведение может быть достигнуто с помощью свойства изменение группировки данных groupPixelWidth.

    Если ширина диаграммы меньше, чем, например, 300px, groupPixelWdith может быть установлено более высокое значение.

    responsive: {
        rules: [{
          chartOptions: {
            plotOptions: {
              series: {
                dataGrouping: {
                  groupPixelWidth: 30
                }
              }
            }
          },
          condition: {
            maxWidth: 300
          }
        }]
      }
    

    пример: http://jsfiddle.net/b894z8ug/1/