Question

如何在调整大小时保持图表不被裁剪，而只是更改其视口？

我发现它有点难以解释，所以如果需要更多解释，请告诉我。

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

在第二张截图中，图表宽度仅为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中找不到任何设置，谷歌也没有帮助。非常感谢

Answer 1

使用不断变化的数据分组groupPixelWidth属性可以实现所需的行为。

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

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

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

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

1 个答案: