时间戳

首页 > 解决方案 > HighCharts 在渲染行为发生变化之前是否具有基本的最小高度？

angular - HighCharts 在渲染行为发生变化之前是否具有基本的最小高度？

问题描述

highcharts 热图是否有基本的最小高度？

我们试图实现的是一个非常宽的热图，即 1 个单元格高和 4,032 到 4,462 个单元格宽，图表被推出框架的边缘。

图表选项目前有：

// options set on start up
chartOptions: Highcharts.Options = {
chart: {
  type: 'heatmap',
  margin: [0, 0, 0, 0],
  spacingTop: 0,
  spacingBottom: 0,
  spacingLeft: 0,
  spacingRight: 0
},
plotOptions: {
  heatmap: { // heatmap specific series
    borderColor: "#C4C4C4",
    borderWidth: 1,
  }
},
title: {
  text: undefined
},
credits: { enabled: false },
xAxis: { visible: false },
yAxis: { visible: false },
legend: { enabled: false },
colors: ["#DCDCDC"],
colorAxis: {
  dataClassColor: "category",
  dataClasses: [
    {
      from: 0,
      to: 0.9,
      color: "#DCDCDC",
      name: "Ok",
    },
    // Snipped full color set
  ]
},
series: [
  {
    name: 'Downtime status',
    type: 'heatmap',
    data: [[0, 0, 0], [1, 0, 0], [2, 0, 0], [3, 0, 0]], // Force initial chart creation to be a single row of data
  }
],
tooltip: {
  enabled: true,
}

};

这一切都在官方的角度包装器中。该图表位于普通标签内：

<highcharts-chart *ngIf="isHighcharts"
                  [Highcharts]="Highcharts"
                  [constructorType]="chartConstructor"
                  [options]="chartOptions"
                  [callbackFunction]="chartCallback">
</highcharts-chart>

这是使用以下 css 设计的：

highcharts-chart {
  clear: both;
  width: 40000px;
  height: 75px;
  overflow-x: auto;
  display: inline-block;
}

该元素是故意溢出的，用户想要一个滚动条而不是缩放图表。在 httpClient 调用完成后加载完整的数据集。

高度值大于 75px 时，单个热图行运行良好并填充整个图表，但是如果我们将其降低到 75px 以下，则图表行为会发生变化，而不是填充图表的行，它会恢复为非常小的行，5 -10px 高，其余部分填充空白。

这个 75px 是硬性限制，还是图表中有更多选项需要关闭？

标签： angularhighcharts

解决方案

在这里： http: //jsfiddle.net/BlackLabel/e9Lp3xvu/我已经复制了没有 Angular 的问题。

该问题是由tickPixelIntervaly 轴 (72) 的默认值引起的。作为一种解决方案，您可以降低该值。

    yAxis: {
        visible: false,
        tickPixelInterval: 1
    },

现场演示：http: //jsfiddle.net/BlackLabel/ozLbs8qy/

API 参考： https ://api.highcharts.com/highcharts/yAxis.tickPixelInterval

推荐阅读