c3.js |

Question

C3.jsのWebサイトの例に続いて、グラフ上のx軸のカスタムラベルを提供しようとしています。

結果は次のようになります。c3js.org/samples/axes_x_tick_values.html：私はC3.jsによって提供される例「X軸の目盛りの値」は、次の試してみましたdesired-output

。

私はこの例ごとに「時系列」と（無駄に）「カテゴリ」の両方を使用して、これを試してみました：... c3js.org/samples/categorized.html

ここJSフィドルの私の試みの一つです：https://jsfiddle.net/qvsdvh8w/9/

そして、ここでは、JavaScriptの：

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' 
     } 
    } 
    }, 
    x: { 
    type: 'timeseries', 
    tick: { 
     values: ['FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17'] 
    }, 
    }, 
}); 

Iはまた、文字列値がx軸データ欄に提供され、ここで示した方法は、以下の標識を試みました。

... c3js.org/samples/axes_x_tick_rotate.html

このアプローチは、しかし、完全グラフを破壊する：

... jsfiddle.net/qvsdvh8w/11/

缶あなたは私が何か間違っていることを理解するのを助けてくれますか？または、これはC3.jsの制限ですか？

あなたの知識と洞察を共有していただきありがとうございます！

Answer 1

私は、y軸用のものの前にx軸のパラメータを動かすことによって、これを解決：

https://jsfiddle.net/qvsdvh8w/14/

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
    x: 'x', 
    columns: [ 
     ['x', 'FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17'], 
     //['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],// 
     ['new eligible cases', 0, 7, 3, 10, 9, 17, 6, 10, 7, 11, 16, 12, 19, 26, 38, 46, 43, 41], 
     ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674], 
     ['carry-over cases', 0, 0, 7, 2, 5, 2, 6, 7, 12, 7, 7, 12, 14, 16, 16, 17, 9, 10], 
     ['expensed contingency', null, null, null, null, 317500, 451500, 428688, 0, 287715, 613107, 768000, 743627, 706836, 753836, 799929, 732580, 877496, 911825] 
    ], 
    axes: { 
     'total budget': 'y2', 
     'expensed contingency': 'y2' 
    }, 
    groups: [ 
     ['carry-over cases', 'new eligible cases'] 
    ], 
    types: { 
     //'open cases': 'bar',// 
     'carry-over cases': 'bar', 
     'new eligible cases': 'bar', // ADD 
    } 
    }, 
    axis: { 
    x: { 
     type: 'category', 
     tick: { 
     rotate: -45, 
     multiline: false 
     }, 
     height: 40 
    }, 
    y: { 
     label: { 
     text: 'open cases', 
     position: 'outer-middle' 
     } 
    }, 
    y2: { 
     show: true, 
     max: 10000000, 
     min: 0, 
     padding: { 
     top: 0, 
     bottom: 0 
     }, 
     label: { 
     text: 'total budget', 
     position: 'outer-middle' 
     } 
    } 
    }, 
}); 

...なぜそれは、しかし、私には不明ですどちらが最初に来るかは重要です。私は洞察に満足しています。

ありがとうございました！