Question

我在Billboard.js中创建了一个如下图所示的图表：

var chart = bb.generate({
    "data": {
        "type": "line",
        "x": "x",
        "columns": columns
    },
    "point": {
        "show": false
    },
    "legend": {
        "show": false
    },
    "axis": {
        "x": {
            "localtime": false,
            "type": "timeseries",
            "tick": {
                count: 7,
                "format": "%b %d, %Y",
                "rotate": 45,
                "multiline": true
            },
             "label": {
                "text": label,
                "position": "outer-center"
            },
        },
        "y": {
            "label": {
                "text": "Energy (kWh)",
                "position": "outer-middle"
            },
        },
    },
    "bindto": "#main-chart"
});

现在看起来像经典款式，底部是X轴，左边是Y轴。我想移动桌子右边的Y轴。

我尝试了很多方法，但没有像这些那样成功：

- 将其名称从y改为y2

- 使用y2添加相同的代码：

"y": {
    "label": {
    "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},

"y2": {
    "label": {
        "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},

我在标签中添加show属性，如下所示：

"y": {
    "label": {
        "show": false,
        "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},
"y2": {
    "label": {
        "show": true,
        "text": "Energy (kWh)",
        "position": "outer-middle"
    },
},

有什么想法吗？

Answer 1

尝试

var chart = bb.generate({
  "data": {
    "columns": [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
    ],
    "axes": {
      "data1": "y2" // set additional y axis
    }
  },
  "axis": {
    "y": {
      "show": false // hide default y axis
    },
    "y2": {
      "show": true
    }
  },
  "bindto": "#AdditionalYAxis"
});

我在github的演示中尝试过它。有一个选项axis，您可以在其中隐藏轴。希望这会有所帮助。

工作示例：https://jsfiddle.net/k3o1ws47/

Answer 2

我想，@ Nouphal确切地指出要做什么。关键点是设置data.axes选项以将数据绑定到y2轴。

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data:axes

我使用您的代码（数据值除外）进行了工作演示，因此将其设置替换为您的数据并且可以正常工作。

＆＃13;

var chart = bb.generate({
    "data": {
        "type": "line",
        "x": "x",
        "columns": [
          // replace with your data value
          ['x', '2017-10-01', '2017-10-02', '2017-10-03', '2017-10-04', '2017-10-05', '2017-10-06'],
          ["data1", 30, 200, 100, 400, 150, 250],
          ["data2", 50, 20, 10, 40, 15, 25]
        ],
        "axes": {
          "data1": "y2",
          "data2": "y2"
        }
    },
    "point": {
        "show": false
    },
    "legend": {
        "show": false
    },
    "axis": {
        "x": {
            "localtime": false,
            "type": "timeseries",
            "tick": {
                count: 7,
                "format": "%b %d, %Y",
                "rotate": 45,
                "multiline": true
            },
             "label": {
                "text": "label",
                "position": "outer-center"
            },
        },
        "y": {
          "show": false
        },
        "y2": {
            "show": true,
            "label": {
                "text": "Energy (kWh)",
                "position": "outer-middle"
            },
        },
    },
    "bindto": "#main-chart"
});

＆＃13;

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
  <div id="main-chart"></div>
</body>
</html>

＆＃13;

如何将图表的Y轴放在右侧

2 个答案: