Question

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

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

结果应该是这样的：

我已经参考了C3.js示例来指导我的尝试：c3js.org/samples/axes_y2.html和c3js.org/samples/axes_x_tick_values.html我能够生成2 y的混合线和条形图-axes。但是，当我将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轴吗？

1 个答案: