c3.js：可以标记 x 轴和多个 y 轴吗？答案

【问题标题】：c3.js: possible to label x axis and multiple y axes?c3.js：可以标记 x 轴和多个 y 轴吗？
【发布时间】：2017-08-22 20:12:21
【问题描述】：

是否可以在同时具有多个 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 的限制？提前感谢您分享您的知识和见解！

【问题讨论】：

标签： charts c3.js

【解决方案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/

【讨论】：

非常感谢！
多了两个 Y 轴呢？有可能吗？
在 C3 Daniel 中不这么认为，最大值为 2。如果您有多个不同尺度的数据系列，如果您想查看它们之间可能的相关性，您可以以某种方式将这些值标准化为相同的尺度跨度>