c3 Charts Tooltip bewegt sich nicht

Ich habe versucht, Graphik funktioniert zu bekommen, alle Daten scheinen graphisch zu sein, jedoch bewegt sich der Tooltip nicht von ganz rechts. Das ist natürlich ein Problem, da ich dann bestimmte Punkte nicht über die Maus bewegen kann, um die Daten zu sehen.c3 Charts Tooltip bewegt sich nicht

ist hier ein JS Geige Beispiel dafür, was passiert: https://jsfiddle.net/kp7eyf8o/6/

HINWEIS: aus irgendeinem Grund die Überlaufstapel JSfiddle mir einen Fehler gibt, aber die URL sollte mein Problem zeigen.

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>

Ich sah ‚xs mit jemand erwähnen: {x .... y ....} aber ich war, dass die Arbeit nicht in der Lage zu bekommen. Ich brauche die X-Achse als Datum (jetzt hart codiert, aber in meiner App verwende ich Daten, die mit einer Datenmenge verknüpft sind, die ich durchschlinge), und die Y-Achse ist $.

Quelle

2016-08-20 edhog

C3-Tooltips scheinen zu brechen, wenn Datenfelder unterschiedlicher Länge in die Spalten eingegeben werden. Sie können versuchen, Nullwerte in das kürzere Array einzugeben, damit sich die QuickInfo ordnungsgemäß bewegen kann. JS Fiddle: 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],

Quelle

2016-08-20 03:55:45

Vielen Dank, das ist perfekt! Also, wenn ich 3 Datensätze verwende, ist es am besten, irgendwie zu bestimmen, welches das längste ist, und dann die anderen 2 Schleifen durch alle ihre Daten zu machen und dann null zurück zu geben, selbst wenn es raus ist? – edhog

Solange die Datensätze die gleiche Größe haben, ist es in Ordnung :). Ich habe auch durch das C3-Repository geschaut und festgestellt, dass es eine offene Pull-Anfrage für genau dieses Problem gab, also könnte dies in einer zukünftigen Version möglicherweise zu einem Nicht-Problem werden. –

Danke, du warst unglaublich hilfreich. – edhog

c3 Charts Tooltip bewegt sich nicht

Antwort

Verwandte Themen