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

是否可以在C3.js图表中定义也具有多个y值的X轴值的值？c3.js：可以标记x轴和多个y轴？

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

结果应该是这样的：

我已经提到了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的限制？预先感谢您分享您的知识和见解！

来源

2017-08-22 aaron.kyle

只是一个简单的语法错误，你会踢自己的;-)

你在上面

相反配置中声明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/

来源

2017-08-24 09:53:29 mgraham

太谢谢你了！ –

超过两个额外的Y轴呢？可能吗？ –

不要在C3中认为丹尼尔，最大值是2.如果你有不同比例的多个数据系列，你可以将数值归一化到相同的比例，如果你想看到它们之间的可能相关性 – mgraham

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

回答

相关问题