c3.js: 可以标记 x 轴和多个 y 轴吗？

Question

是否可以在具有多个 y 值的 C3.js 图表中定义 X 轴值？

我正在尝试创建一个包含两个 y 轴和 x 轴自定义标签的混合条形图和折线图。

结果应该是这样的：

desired-output

我参考了 C3.js 示例来指导我的尝试：c3js.org/samples/axes_y2.html 和 c3js.org/samples/axes_x_tick_values.html 我是能够生成具有 2 个 y 轴的混合折线图和条形图。但是，当我将 in 标签添加到 x 轴时，我丢失了第二个 y 轴：

我可以让图表显示 2 个 y 轴：

<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="chart"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <script>

    var chart = c3.generate({
        bindto: '#chart',
        data: {
          x : 'x',
          columns: [
            ['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
            ['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
            ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
          ],
          axes: {
            'total budget': 'y2'
          },
          types: {
            'open cases': 'bar' // ADD
          }
        },
        axis: {
          y: {
            label: {
              text: 'open cases',
              position: 'outer-middle'
            }
          },
          y2: {
            show: true,
            label: {
              text: 'total budget',
              position: 'outer-middle'
            }
          }
        }
    });

    </script>
  </body>
</html>

...但是一旦我尝试为 x 轴添加标签，第二个 y 轴就消失了：

<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="chart"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <script>

    var chart = c3.generate({
        bindto: '#chart',
        data: {
          x : 'x',
          columns: [
            ['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
            ['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
            ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
          ],
          axes: {
            'total budget': 'y2'
          },
          types: {
            'open cases': 'bar' // ADD
          }
        },
        axis: {
          y: {
            label: {
              text: 'open cases',
              position: 'outer-middle'
            }
          },
          y2: {
            show: true,
            label: {
              text: 'total budget',
              position: 'outer-middle'
            }
          }
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    values: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]
                },
            }
        }
    });

    </script>
  </body>
</html>

https://jsfiddle.net/qvsdvh8w/3/

我是不是做错了什么，或者这是 C3.js 的限制？预先感谢您分享您的知识和见解！

Answer 1

只是一个微不足道的语法错误，你会自责 ;-)

您已在上述配置中声明 axis 两次

相反，将 x 轴声明放在轴属性中与 y 轴

并排

axis: {
          y: {
            label: {
              text: 'open cases',
              position: 'outer-middle'
            }
          },
          y2: {
            show: true,
            label: {
              text: 'total budget',
              position: 'outer-middle'
            }
          }
        },
        x: {
            type: 'timeseries',
            tick: {
                    values: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]
                },
        }
    }

https://jsfiddle.net/qvsdvh8w/4/

c3.js: 可以标记 x 轴和多个 y 轴吗？

c3.js: possible to label x axis and multiple y axes?

charts

c3.js