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

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

charts

Charts c3.js：是否可以标记x轴和多个y轴？,charts,c3.js,Charts,C3.js,是否可以在同样具有多个y值的C3.js图表中定义X轴值我正在尝试创建一个带有两个y轴和自定义x轴标签的混合条形图和折线图结果应该是这样的：我参考了C3.js示例来指导我的尝试：c3js.org/samples/axes_y2.html和c3js.org/samples/axes_x_tick_values.html我能够生成带有两个y轴的混合线图和条形图。但是，当我将in标签添加到x轴时，我会丢失第二个y轴：我可以让图表显示2个y轴： <html> <head&g

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

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

结果应该是这样的：

我参考了C3.js示例来指导我的尝试：c3js.org/samples/axes_y2.html和c3js.org/samples/axes_x_tick_values.html我能够生成带有两个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>


var图表=c3.0({
bindto:'图表'，
数据：{
x：‘x’，
栏目：[
[x'，2000、2001、2002、2003、2004、2005、2006、2007、2008、2009、2010、2011、2012、2013、2014、2015、2016、2017]，
[“未决案件”，0、7、10、12、14、19、12、17、19、18、23、24、33、42、54、63、52、51]，
[总预算，01359300170090022482002417400 2966846 2966846 2658700 30090823919996 42122004319972 4882937 5026751 56712435059538 5896239 6289674]
],
轴线：{
“总预算”：“y2”
},
类型：{
“打开的案例”：“bar”//添加
}
},
轴线：{
y:{
标签：{
正文：“未决案件”，
位置：'外侧中间'
}
},
y2：{
秀：没错，
标签：{
正文：“总预算”，
位置：'外侧中间'
}
}
}
});

。。。但一旦我尝试为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>


var图表=c3.0({
bindto:'图表'，
数据：{
x：‘x’，
栏目：[
[x'，2000、2001、2002、2003、2004、2005、2006、2007、2008、2009、2010、2011、2012、2013、2014、2015、2016、2017]，
[“未决案件”，0、7、10、12、14、19、12、17、19、18、23、24、33、42、54、63、52、51]，
[总预算，01359300170090022482002417400 2966846 2966846 2658700 30090823919996 42122004319972 4882937 5026751 56712435059538 5896239 6289674]
],
轴线：{
“总预算”：“y2”
},
类型：{
“打开的案例”：“bar”//添加
}
},
轴线：{
y:{
标签：{
正文：“未决案件”，
位置：'外侧中间'
}
},
y2：{
秀：没错，
标签：{
正文：“总预算”，
位置：'外侧中间'
}
}
},
轴线：{
x:{
键入：“timeseries”，
勾选：{
价值：[2000、2001、2002、2003、2004、2005、2006、2007、2008、2009、2010、2011、2012、2013、2014、2015、2016、2017]
},
}
}
});

我是做错了什么，还是这是C3.js的一个限制？提前感谢您分享您的知识和见解

这只是一个小的语法错误，你会为此而自责；-）

在上面的配置中，您已经声明了两次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]
                },
        }
    }

非常感谢您！两个以上的附加Y轴如何？有可能吗？别这么认为，在C3中丹尼尔，最大值是2。如果您有多个不同比例的数据系列，如果您希望看到它们之间可能的相关性，您可以将这些值以某种方式标准化为相同的比例