首頁猿問在 Highcharts...

在 Highcharts 熱圖中設置行和列之間的特定間距

JavaScript

青春有我 2021-11-12 14:53:19

如您所見，第一行和最后一列與其余部分被更大的空間隔開。第一行下方還有一條細的水平灰線。我怎樣才能達到這個結果？#container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto}<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/heatmap.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/export-data.js"></script><div id="container"></div>

查看完整描述

1 回答

慕田峪4524236

TA貢獻1875條經驗獲得超5個贊

您可以使用xAxis.breaks,yAxis.plotLines并Highcharts.SVGRenderer渲染一個覆蓋 xAxis 中斷點的矩形來實現此結果。檢查下面發布的演示和代碼。

代碼：

chart: {

events: {

render: function() {

var chart = this,

xAxis = chart.xAxis[0],

x = xAxis.toPixels(8.5),

y = chart.plotTop,

width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,

element;

if (chart.customElements) {

chart.customElements.forEach(function(elem) {

elem.destroy();

});

}

chart.customElements = [];

element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({

fill: '#fff',

zIndex: 100

}).add();

chart.customElements.push(element);

}

xAxis: {

breaks: [{

breakSize: 0.6,

from: 8.5,

to: 9

}]

yAxis: {

plotLines: [{

value: 3.5,

width: 5,

color: '#fff',

zIndex: 100

}, {

value: 3.5,

width: 1,

color: '#ccc',

zIndex: 101

}]

}

演示：

https://jsfiddle.net/BlackLabel/16e3o8jk/

API參考：

https://api.highcharts.com/highcharts/xAxis.breaks

https://api.highcharts.com/highcharts/yAxis.plotLines

https://api.highcharts.com/highcharts/chart.events.render

反對回復 2021-11-12

1 回答
0 關注
310 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Highcharts 熱圖中設置行和列之間的特定間距

在 Highcharts 熱圖中設置行和列之間的特定間距

1 回答

添加回答