我想更新图表的ygrids。它工作正常而不是部分:它不会更新它的css类。
这个示例可能不是显示它的最佳方式,但是当我在控制台中查看时,即使相对于value
更改了消息,该类也不会从{{1}更改转到min-message
或其他方式。
有谁知道为什么会这样?
max-mesagge
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([{
value: remove, text: "value bigger than y max", position: "start", class: "min-message"
}])
}, 0);
setTimeout(function() {
chart.ygrids([{
value: add, text: "value bigger than y max", position: "start", class: "max-message"
}]);
}, 100);
}
#chart {width:400px; height:250px; }
.min-message line{
stroke: red;
}
.min-message text{
fill: red;
}
.max-message line{
stroke: green;
}
.max-message text{
fill: green;
}
答案 0 :(得分:0)
这是一个错误,将在https://github.com/naver/billboard.js/issues/389处理。
要解决此问题,请在设置网格之前删除。
setTimeout(function() {
// remove all current grids, before adding
chart.ygrids.remove();
chart.ygrids([{
value: remove, text: "value bigger than y max",
position: "start",
class: "min-message"
}])
}, 0);