javascript - Highcharts 响应在第一次渲染时被忽略
问题描述
我的图例有以下代码,以及删除移动图例的响应规则。
我现在看到的问题是图例最初总是与图表一起加载。响应式规则似乎只适用于以后(即,如果我重新加载页面,图例就在那里,如果我单击另一个页面的链接,然后返回,图例就消失了)。
有没有办法强制对负载进行响应检查?
legend: {
enabled: true,
verticalAlign: 'top',
align: 'right',
floating: true,
margin: 0,
padding: 0,
x: showConviction ? -50 : -46,
y: 10
},
responsive: {
rules: [
{
condition: {
maxWidth: 400
},
chartOptions: {
legend: {
enabled: false
}
}
}
]
},
解决方案
您可以检查chartWidth
何时发生加载事件并禁用图例。
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
JS:
Highcharts.chart('container', {
chart: {
events: {
load: function() {
var chart = this,
legend = chart.legend,
chartWidth = chart.chartWidth;
if (chartWidth < 400) {
legend.update({
enabled: false
});
}
}
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}],
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
});
推荐阅读
- java - macOS 上的 Java 8 + JavaFX:“错误:缺少 JavaFX 运行时组件,需要运行此应用程序。”
- c++ - 当外部程序生成 ANSI 转义时,Bash PS1 提示符会换行
- reactjs - 在 NextJs 中导入 CSS 时遇到问题
- android-studio - 编译颤振应用程序时出错
- spring - Spring @AliasFor 不适用于注释 @RabbitListener
- php - 我的表正在更新,但在 Laravel 6 更新之前未验证
- mysql - 如何按降序对未来的数据进行多排序,然后按升序对过去的数据进行排序?
- javascript - 使用 jquery 创建链接标签并连接 href 属性以存储结果变量时遇到问题
- mysql - SQL 查询在虚拟主机上执行时出错,但在本地主机上运行没有问题
- git - Azure DevOps Git 将 master 合并到有冲突的功能分支中