c3.js：是否可以标注x轴和多个y轴？

Question

c3.js：是否可以标注x轴和多个y轴？

3

在一个具有多个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轴的混合线条和柱状图。但是，当我添加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的限制？感谢您分享您的知识和见解！

- aaron.kyle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mgraham · Accepted Answer

只是一个微不足道的语法错误，你会为此感到后悔的 ;-)

在上面的配置中，你声明了axis两次。

相反，将x轴声明放在与y轴一起的axis属性中。

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/