【发布时间】：2021-11-11 19:38:41
【问题描述】：
我有一个在 highcharts 中的图表，带有自定义移动 x 轴标签（以适应刻度之间而不是刻度），最后一个标签被删除（有关原始图表的开发，请参阅此主题：HIGHCHARTS: Event on Export can't access x-axis labels）。
当 x 轴标签的数量变大和/或图表宽度变得太窄时，默认的自动旋转似乎不起作用。相反，标签用省略号（'...'）截断。请参阅下面的图片和 JS Fiddle：
这里是 JS 小提琴：https://jsfiddle.net/SirMunchington/g5t4kr7L/2
这是 jsfiddle 中的代码，因为包括小提琴链接在内的主题中需要代码：
HTML：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<a href title="Download Chart" id="download-link">Download Chart</a>
<div id="container"></div>
JS：
var download_link = document.getElementById('download-link');
download_link.onclick = downloadChartImage;
function downloadChartImage() {
Highcharts.charts[0].exportChartLocal({
filename: 'test123',
type: 'image/png',
})
return false;
}
chart_options = {
"colors": ["#f28f43", "#ffea00", "#2f7ed8", "#9370db", "#1aadce", "#8bbc21", "#c42525"],
"exporting": {
"chartOptions": {
"chart": {
"backgroundColor": "#ffffff",
}
},
"sourceWidth": 1250,
"sourceHeight": 500,
"scale": 2,
"fallbackToExportServer": false,
"buttons": {
"contextButton": {
"enabled": false
}
}
},
"title": {
"text": "EDITZ TEST GOAL FOR INSTITUTION Updated Name",
"style": {
"color": "#274b6d",
"fontSize": "16px"
}
},
"chart": {
"reflow": true,
"backgroundColor": "transparent",
"borderRadius": 5,
"events": {
render() {
let chart = this,
xAxis = chart.xAxis[0],
ticks = xAxis.ticks,
firstTick = ticks[xAxis.tickPositions[0]],
secondTick = ticks[xAxis.tickPositions[1]],
ticksDistance = secondTick.mark.getBBox().x - firstTick.mark.getBBox().x;
for (let i in ticks) {
let tick = ticks[i];
if (!tick.isLast) {
tick.label.translate(ticksDistance / 2, 0)
}
}
}
}
},
"plotOptions": {
"series": {
"label": {
"connectorAllowed": true
},
"pointStart": 2011,
"animation": false,
"enableMouseTracking": true,
"stickyTracking": false,
"shadow": false
},
"line": {
"animation": false,
"enableMouseTracking": true,
"shadow": false,
"marker": {
"enabled": true
}
}
},
"legend": {
"borderColor": "#000000",
"borderRadius": 5,
"borderWidth": 1,
"useHTML": true,
"adjustChartSize": true,
"itemHiddenStyle": {
"color": "#8e8e8e"
},
"itemStyle": {
"fontWeight": "normal",
"color": "#274b6d"
},
"itemDistance": 10,
"symbolRadius": 2
},
"credits": {
"enabled": false
},
"xAxis": {
"type": "datetime",
"labels": {
formatter: function() {
return moment(this.value).year()
}
},
"tickPositions": [1277967600000, 1309503600000, 1341126000000, 1372662000000, 1404198000000, 1435734000000, 1467356400000, 1498892400000, 1530428400000, 1561964400000, 1593586800000, 1625122800000, 1656658800000, 1688194800000, 1719817200000, 1751439600000, 1783062000000, 1814684400000, 1846306800000, 1877929200000, 1909551600000, 1941174000000, 1972796400000],
"endOnTick": true,
"startOnTick": true,
showLastLabel: false,
"maxPadding": 0,
"minPadding": 0,
"tickLength": 5,
"title": {
"text": "Fiscal Year",
"style": {
"color": "#4d759e",
"fontWeight": "bold"
}
},
"plotLines": [{
"color": "rgba(0, 0, 0, 0.3)",
"width": 1,
"value": 1341125999999,
"dashStyle": "longdash"
}, {
"color": "rgba(0, 0, 0, 0.8)",
"width": 1,
"value": 1605130646775,
"dashStyle": "longdash"
}, {
"color": "rgba(139, 188, 33, 0.5)",
"width": 1,
"value": 1657609200000,
"dashStyle": "longdash"
}, {
"color": "#f28f43",
"width": 1,
"value": 1612166400000,
"dashStyle": "longdash"
}]
},
"yAxis": {
"tickLength": 5,
"title": {
"text": "Energy consumed (MMBtu)",
"style": {
"color": "#4d759e",
"fontWeight": "bold"
}
}
},
"series": [{
"type": "line",
"name": "Past consumption (Projected)",
"color": "#000000",
"marker": {
"symbol": "circle"
},
"dashStyle": "Dash",
"legendIndex": 0,
"tooltip": {
"valueDecimals": 0,
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1277967599999, 420113.1142557926],
[1341125999999, 420113.1142557926]
]
}, {
"type": "line",
"name": "Consumption (Actual)",
"color": "#000000",
"lineWidth": 2,
"marker": {
"symbol": "circle"
},
"legendIndex": 1,
"tooltip": {
"valueDecimals": 0,
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1341125999999, 420113.1142557926],
[1435733999999, -50],
[1467356399999, 37.53355796084987],
[1498892399999, 500],
[1530428399999, -500],
[1561964399999, 250],
[1593586799999, -250]
]
}, {
"type": "scatter",
"name": "Baseline",
"color": "rgba(0, 0, 0, 0.9)",
"marker": {
"symbol": "square",
"radius": 5
},
"legendIndex": 2,
"tooltip": {
"enabled": true,
"useHTML": true,
"outside": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1341125999999, 420113.1142557926]
]
}, {
"type": "line",
"name": "Baseline consumption",
"color": "rgba(140, 21, 21, 0.75)",
"marker": {
"symbol": "triangle"
},
"dashStyle": "Dash",
"legendIndex": 3,
"tooltip": {
"valueDecimals": 0,
"outside": true,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1341125999999, 420113.1142557926],
[1372661999999, 420113.1142557926],
[1404197999999, 420113.1142557926],
[1435733999999, 420113.1142557926],
[1467356399999, 420113.1142557926],
[1498892399999, 420113.1142557926],
[1530428399999, 420113.1142557926],
[1561964399999, 420113.1142557926],
[1593586799999, 420113.1142557926],
[1625122799999, 420113.1142557926],
[1656658799999, 420113.1142557926],
[1688194799999, 420113.1142557926],
[1719817199999, 420113.1142557926],
[1751353199999, 420113.1142557926],
[1782889199999, 420113.1142557926],
[1814425199999, 420113.1142557926],
[1845961199999, 420113.1142557926],
[1877497199999, 420113.1142557926],
[1909033199999, 420113.1142557926],
[1940569199999, 420113.1142557926],
[1972105199999, 420113.1142557926],
[2003641199999, 420113.1142557926],
[2035177199999, 420113.1142557926]
]
}, {
"type": "scatter",
"name": "Current Date",
"color": "#000000",
"marker": {
"symbol": "circle",
"radius": 5
},
"legendIndex": 4,
"tooltip": {
"enabled": true,
"useHTML": true,
"outside": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1605130646777, 420113.1142557926]
]
}, {
"type": "scatter",
"name": "Intermediate Target #1",
"color": "#f28f43",
"marker": {
"symbol": "diamond",
"radius": 5
},
"legendIndex": 5,
"tooltip": {
"enabled": true,
"useHTML": true,
"outside": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1612166400000, 1234]
]
}, {
"type": "scatter",
"name": "Primary Target",
"color": "#8bbc21",
"marker": {
"symbol": "diamond",
"radius": 5
},
"legendIndex": 6,
"tooltip": {
"enabled": true,
"valueDecimals": 0,
"useHTML": true,
"headerFormat": "<span style=\"font-weight:bold; color:{series.color};\">{series.name}</span><br />"
},
"data": [
[1657609200000, 123]
]
}]
}
Highcharts.chart('container', chart_options)
【问题讨论】：
-
我不确定您的问题是否与this question 有关，但在 LinusR 的回答中，autoRotation 仅适用于类别图表。因此，您可以尝试添加诸如加载和重绘之类的事件来调用函数以根据 morganfree 的评论调整标签旋转。
标签： highcharts