基于this question我做了一个图表。有两个文本输入，可以在其中引入值，这些值将根据它们的值重新生成 Y 轴。
文本输入有一个用于min，一个用于max。如果满足某些条件，则必须在图表上显示一些消息:
- 如果在最大输入中引入一个小于实际最小值的值，则应在图表的左上角显示以下消息:“值小于 y min”
- 如果在最小值输入中引入的值大于实际最大值，则图表的左下角应显示以下消息:“值大于 y max”
- 如果引入了仍满足这些条件的其他值，则消息应保留在图表上
- 如果引入了值(最小值<最大值)，则消息应该消失
在我的代码中，当引入第一个使消息可见的最小和最大值时，效果很好。如果这些值发生更改但条件仍然为真，它们就会消失(这不应该消失)。仅当 min < max 时它们才必须消失。
如果我从前两个 if 中删除 this.lineView.chart.ygrids.remove() 调用，它将再次重写消息一个接一个，每条消息最多应有一条(最小或最大)。
这是我的代码:
(如果在最小输入中引入了一个值，则为min，如果发生在最大输入中，则为max)
updateChart(which) {
this.lineView.chart.axis.range({max: {y: this.myChart.max}, min: {y: this.myChart.min}});
if(this.myChart.min > this.myChart.max) {
if (which === 'max'){
this.lineView.chart.ygrids.remove(
{value: this.myChart.max, text: "value smaller than y min", position: "start", class: "max-message"}
);
this.lineView.chart.ygrids.add(
{value: this.myChart.max, text: "value smaller than y min", position: "start", class: "max-message"}
);
}
if (which === 'min') {
this.lineView.chart.ygrids.remove(
{value: this.myChart.min, text: "value bigger than y max", position: "start", class: "min-message"}
);
this.lineView.chart.ygrids.add(
{value: this.myChart.min, text: "value bigger than y max", position: "start", class: "min-message"}
);
}
}
if(this.myChart.min < this.myChart.max) {
this.lineView.chart.ygrids.remove();
}
}
我将 translateY 添加到消息中，因为否则它们将位于(可见)图表之外:
.min-message {
transform: translateY(-40px);
}
.max-message {
transform: translateY(40px);
}
.min-message line, .max-message line {
display: none;
}
.min-message text, .max-message text {
font-size: 15px;
}
我猜问题出在 remove 和 add 相继调用。
删除 ygrids 后是否无法将其添加回来？
如有任何建议，我们将不胜感激。
最佳答案
这是因为网格的添加和删除是通过过渡完成的。 因此，如果您想按顺序执行添加和删除网格，请以一些确定的时间间隔运行它们。
var chart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 130, 250, 140, 200, 150, 50],
["data3", 100, 200, 340, 300, 250, 250],
["data4", 80, 230, 240, 100, 350, 150]
],
type: "bar"
},
grid: {
y: {
lines: [
{value: 100, text: 'Label 1'}
]
}
},
transition: {
duration: 0
}
});
function toggle(remove, add) {
setTimeout(function() {
chart.ygrids.remove({
value: remove, text: "value bigger than y max", position: "start", class: "min-message"
})
}, 0);
setTimeout(function() {
chart.ygrids.add({
value: add, text: "value bigger than y max", position: "start", class: "min-message"
});
}, 100);
}#chart {width:400px; height:250px; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>billboard.js</title>
</head>
<body>
<div id="chart"></div>
<button onclick="toggle(100, 300)">one</button>
<button onclick="toggle(300, 100)">two</button>
</body>
</html>关于javascript - Chart.ygrids.remove 和 Chart.ygrids.add 不能一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49669945/