Question

基于this question我制作了一张图表。有两个文本输入，其中可以引入值，这些值将根据它们的值重新生成Y轴。

文本输入为 min ， max 为1。如果满足某些条件，必须在图表上显示一些消息：

如果在最大输入中引入一个小于实际最小值的值，则在图表的左上角应显示以下消息：“小于y min的值”
如果在最小输入中引入了一个大于实际最大值的值，则在图表的左下角应显示以下消息：“值大于y max”
如果引入了仍在满足这些条件的其他值，则消息应保留在图表上
如果有引入的值（min

在我的代码中，当引入min和max的第一个值使消息可见时，它可以很好地工作。如果这些值发生了变化但条件仍为真，则它们会消失（不应该）。它们必须在最小值时消失。最大

如果我从前两个if中删除this.lineView.chart.ygrids.remove()个调用，它将重新重写另一个消息，每个消息应该最多只有一个消息（最小或最大）。 / p>

这是我的代码：

（如果在min输入中引入了值，则which为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后是否真的无法将其添加回去？

任何建议都将不胜感激。

Answer 1

这是因为添加＆amp;通过过渡完成网格的移除。因此，如果您想要按顺序执行添加和删除网格，请在确定的时间间隔内运行它们。

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>

Chart.ygrids.remove和Chart.ygrids.add无法一起使用

1 个答案: