图表生成后 Billboard Js 图表更新 y 轴的可见性

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) 初始化时控制y Axis不显示，用CSSdisplay属性代替axis.y.show=false.

2) 当你加载新数据时，使用.load()的done选项回调来控制再次显示y轴显示。

查看下面的工作示例。

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");
  }
 });
}

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

<!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>

图表生成后 Billboard Js 图表更新 y 轴的可见性

Billboardjs chart update visibility of y axis after chart generation

javascript

charts

d3.js

billboard.js