2017-08-22 4 views
1

複数のy値を持つC3.jsグラフのX軸値の値を定義することはできますか?c3.js:x軸と複数のy軸にラベルを付けることは可能ですか?

私は、2つのy軸とx軸のカスタムラベルを持つ混合棒グラフと折れ線グラフを作成しようとしています。私は私の試みを導くためにC3.jsの例を参照している

desired-output

結果は次のようなものでなければなりませんc3js.org/samples/axes_y2.htmlとc3js.org/samples /axes_x_tick_values.html私は2つのy軸を持つ混合線と棒グラフを作成することができます。私は2 y軸を示すためにチャートを得ることができます

::私は、x軸にラベルを追加すると、しかし、私は、第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> 

を...しかし、私に一度

<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の制限です:x軸のラベルを追加しようと、第2のY軸が消えますか?あなたの知識と洞察を共有してくれてありがとう!あなたがあなたの代わりに

上記の構成で二回axisを宣言した;-)

のために自分自身を蹴るよ

答えて

0

だけ些細な構文エラー、Yと一緒に軸プロパティでx軸宣言を置きます軸

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/

+0

はどうもありがとうございます! –

+0

3つ以上のY軸を追加するとどうなりますか?出来ますか? –

+0

C3 Danielでは、maxは2とは思わないでください。異なるスケールで複数のデータ系列がある場合、それらの間に相関関係があることがわかるように、値を何とか同じスケールに正規化できます – mgraham

関連する問題