Highstock/chart - 在调整大小时，不要裁剪图表

Question

如何防止图表在调整大小时裁剪，而只是更改其视口？

我觉得解释起来有点困难，所以如果需要更多解释，请告诉我。

第一个屏幕截图上的图表看起来不错，它们之间的间距是正常的，并且条形图没有被裁剪。这个有 1000 像素的宽度。

Chart box wide

在第二张截图中，图表只有 300px 宽，烛台变为 'cropped'..

Chart box cropped

相反，我只想更改视口，这样条形就不会被裁剪，并且始终保持相同的大小。只有日期范围（视口）发生变化。您会在更宽的图表上看到更多条形图，但这并不意味着条形图本身应该增大或缩小。

我用简单的算法试了一下，但是很容易出错。

    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 也没有太大帮助。非常感谢

Answer 1

可以通过更改数据分组来实现所需的行为 groupPixelWidth 属性。

当图表的宽度小于例如300px, groupPixelWdith 可以设置更大的值。

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

示例：http://jsfiddle.net/b894z8ug/1/

Highstock/chart - 在调整大小时，不要裁剪图表

Highstock/chart - On resize, don't crop chart

javascript

viewport

highcharts

highstock