Highstock/chart - При изменении размера, не обрезайте диаграмму

Как сохранить график при обрезке при изменении размера, но вместо этого просто измените его окно просмотра?Highstock/chart - При изменении размера, не обрезайте диаграмму

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

Диаграмма на первом снимке экрана выглядит красиво, они имеют «нормальное расстояние между ними, а полосы не обрезаны». У этого есть ширина 1000px.

Chart box wide

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

Chart box cropped

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

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

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, и google тоже не помог. Большое спасибо

источник

2017-01-14 DutchKevv

Я не думаю, что есть возможность для этого. Однако вы можете увеличить [groupPixelWidth] (http://jsfiddle.net/b894z8ug/1/) для меньшего графика - он должен решить вашу проблему. Вы можете сделать это с помощью гибких правил, если вы используете Highcharts 5+ или by series.update для Highcharts. 5- – morganfree

Спасибо @morganfree, он действительно делает то, что мне действительно нужно. Это лучше, чем расчет взломанного увеличения. Можете ли вы дать ему ответ, чтобы я мог установить его как решение? :) – DutchKevv

Отлично, я отправил ответ. – morganfree

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

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

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

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

источник

2017-01-20 17:39:50 morganfree

Highstock/chart - При изменении размера, не обрезайте диаграмму

ответ

Смежные вопросы