2016-08-20 13 views
0

私はグラフを作成しようとしていますが、すべてのデータがグラフになっているようですが、ツールチップは右端から移動しません。これはもちろん、データを見るために特定のポイントにマウスを合わせることができないため、問題です。 https://jsfiddle.net/kp7eyf8o/6/c3グラフのツールチップが動かない

注:

はここで何が起こっているのJSフィドル一例であるスタックオーバーフローJSfiddleは私にエラーを与える何らかの理由でが、URLは私の問題を表示する必要があります。

var chart = c3.generate({ 
 
    bindto: '#test', 
 
    data: { 
 
    x: 'x', 
 
    columns: [ 
 
     ['x', '2016-01-01', '2016-02-02', '2016-03-03', '2016-04-04', '2016-05-05', '2016-06-06', '2016-07-07', '2016-08-08', '2016-09-09', '2016-10-10', '2016-11-11', '2016-12-12'], 
 
     ['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, ], 
 
     ['2016 Projected', 3916752.11, 4626643.23, 5146264.25, 6148854.32, 6640724.57, 7409783.48, 8263054.46, 8488001.54, 8837809.1, 9068047.68, 9402019.15, 9513505.72, ], 
 
     ['2015 Actual', 3256870.0, 3825580.0, 4394290.0, 5550000.0, 6044000.0, 7100000.0, 7700000.0, 8154000.0, 8860000.0, 9200000.0, 9500000.0, 9600328.45, ] 
 
    ], 
 
    colors: { 
 
     '2016 Actual': '#2cd554', 
 
     '2016 Projected': '#1bc4fc', 
 
     '2015 Actual': '#fdaf5a' 
 
    } 
 
    }, 
 
    axis: { 
 
    x: { 
 
     type: 'timeseries', 
 
     tick: { 
 
     culling: false, 
 
     format: '%b' 
 
     } 
 
    }, 
 
    y: { 
 
     tick: { 
 
     format: d3.format("$,.2f") 
 
     } 
 
    } 
 
    }, 
 
});
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet" /> 
 
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script> 
 

 

 
<div id="test"></div>

私は誰かが「XSを使用して言及しました:{X .... yの....}が、私はその作業を取得することができませんでした。私はX軸が日付(今日はハードコードされていますが、私はループしている1つのデータセットに関連付けられた日付を使用しています)とY軸を$にする必要があります。

答えて

1

異なる長さのデータ配列を列に入力すると、C3のツールチップが壊れているように見えます。短い方の配列にnull値を入れて、ツールチップが適切に動くようにすることができます。 JSフィドル:https://jsfiddle.net/stancheta/7zgny2yd/

['2016 Actual', 12873666.64, 15976835.94, 19232540.28, 23649495.4, 26338636.36, 29496799.84, 43801703.66, 4263924.64, 5788580.3, null, null, null], 
+0

はそれが完璧だ、ありがとう!だから私は3つのデータセットを使用している場合は、何が最長であるかを何とか決めるのが最善ですし、すべてのデータを介して他の2つのループを作成し、 – edhog

+0

データセットが同じサイズになっている限り、それはうまくいくでしょう:)。私はC3リポジトリを見ていて、この正確な問題に対するオープンプルリクエストがあることに気づいたので、将来のバージョンではこれは問題にならないかもしれません。 –

+0

ありがとう、あなたは信じられないほど助けになりました。 – edhog

関連する問題