Question

所以我正在生成一个图表，隐藏y轴，如下所示：

const chart = bb.generate({
  "data": {
        "type": "line",
        "x": "x",
        "columns": columns,
        "axes": {"data1":"y2"},
  },
  "axis":{
       "y": {show: false},
       "y2": {show: true}
  }
  ...
}

然后，在未来的某个地方，我在这个图表中加载一组新数据，但这次我想显示一些与y轴相关的数据。我不知道如何告诉图表使y轴可见。

有干净的（bb api）方式吗？我不想重新生成图表。或者我应该让y轴在初始配置对象中可见，并使用类似jquery / d3.selection / ...来切换y轴的可见性？感谢。

Answer 1

没有确切的API用于此目的，但您可以按如下方式进行。

1）在初始化时，使用CSS y Axis属性而不是display来控制axis.y.show=false不显示。

2）当您加载新数据时，请使用.load（）＆＃39; done选项回调来控制y轴显示再次显示。

查看下面的工作示例。

＆＃13;

const chart = bb.generate({
	data: {
		columns: [
			["data1", 30, 200, 100, 200, 150, 150],
			["data2", 30, 20, 10, 40, 15, 25]
		]
	},
	axis: {
		y2: {
			show: true
		}
	}
});

function load() {
	chart.load({
		columns: [
		    ["data3", 220, 90, 80, 70]
		],
		done: () => {
		    d3.select(".bb-axis.bb-axis-y").style("display", "inherit");
		}
	});
}

＆＃13;

.bb-axis.bb-axis-y {
    display: none;
}

＆＃13;

<!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>JS Bin</title>
</head>
<body>
  <div id="chart"></div>  
  <button onclick="load()">Load data</button>
</body>
</html>

＆＃13;

Billboardjs图表在图表生成后更新y轴的可见性

1 个答案: