java - チャートキックでタイムラインを変更する

Question

複数系列の折れ線グラフの視覚化に Chartkick を使用しています。コードは次のとおりです。

<h1>Multiple Series Line</h1> <div id="chart-4" style="height: 300px;"></div> <script> new Chartkick.LineChart("chart-4", [{"name":"Workout","data":{"2013-02-10 00:00:00 -0800":3,"2013-02-17 00:00:00 -0800":3,"2013-02-24 00:00:00 -0800":3,"2013-03-03 00:00:00 -0800":1,"2013-03-10 00:00:00 -0800":4,"2013-03-17 00:00:00 -0700":3,"2013-03-24 00:00:00 -0700":2,"2013-03-31 00:00:00 -0700":3}},{"name":"Go to concert","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":0,"2013-02-24 00:00:00 -0800":0,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":2,"2013-03-17 00:00:00 -0700":1,"2013-03-24 00:00:00 -0700":0,"2013-03-31 00:00:00 -0700":0}},{"name":"Wash face","data":{"2013-02-10 00:00:00 -0800":0,"2013-02-17 00:00:00 -0800":1,"2013-02-24 00:00:00 -0800":0,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":0,"2013-03-17 00:00:00 -0700":1,"2013-03-24 00:00:00 -0700":0,"2013-03-31 00:00:00 -0700":1}},{"name":"Call parents","data":{"2013-02-10 00:00:00 -0800":5,"2013-02-17 00:00:00 -0800":3,"2013-02-24 00:00:00 -0800":2,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":0,"2013-03-17 00:00:00 -0700":1,"2013-03-24 00:00:00 -0700":1,"2013-03-31 00:00:00 -0700":0}},{"name":"Eat breakfast","data":{"2013-02-10 00:00:00 -0800":3,"2013-02-17 00:00:00 -0800":2,"2013-02-24 00:00:00 -0800":1,"2013-03-03 00:00:00 -0800":0,"2013-03-10 00:00:00 -0800":2,"2013-03-17 00:00:00 -0700":2,"2013-03-24 00:00:00 -0700":3,"2013-03-31 00:00:00 -0700":0}}]); </script>

スクリプトの出力は次のとおりです



。私の質問は、チャート内のすべてを編集することはできますが、チャートのタイム ラインを変更することはできません。現在のグラフにあるタイム ラインのように = [2013 年 2 月 15 日、2013 年 2 月 22 日、2013 年 3 月 1 日、2013 年 3 月 8 日、2013 年 3 月 15 日、2013 年 3 月 22 日、2013 年 3 月 29 日]
のような形式で現在のタイム ラインを変更したい= [1月、2月、3月、4月、5月、6月、7月、8月、9月、10月、11月、12月]

Answer 1

私はChartkickを使用していません...しかし、同じ要件のために、dviz-master APIを使用して要件を達成しました...コードは以下に示されています-

折れ線グラフ

<pre><code>
Name, cat-A,cat-B , cat-C
Jan, 1, 2, 3
Feb, 4, 5, 6
Mar, 7, 8, 9
</code></pre>
<p><code>(@line)</code></p>

出力は次のようになります