c3.js

问题 I use c3 to create simple graphs. I want to get datas from a Json file and fill it to create my Line-Graph. My Y Values should be ("Labels") and my X Values should be ("Datas"). So this is, how my Code looks like: var chart = c3.generate({ bindto: '#chart', data: { xFormat: '%Y-%m-%dT%H:%M:%S', json: { times:datas, data: labels } } }); My "datas" (Array) are: "2014-01-01T10:10:10" "2014-02-01T10:10:10" "2014-03-01T10:10:10" "2014-04-01T10:10:10" "2014-05-01T10:10:10" ... And my labels : 1234

问题 Here is my JS code: var abc = JSON.stringify(dataObject); var chart = c3.generate({ bindto: '#container', data: { json: abc, keys: { x:'_id', value: ['a', 'b','c','d'], }, axis: { x: { type: 'timeseries', } } } }); The above code gives error: undefined is not a function. However if I directly give the same data directly without storing in a variable, the code works. Please let me know what the mistake is. 回答1: i got the Answer , it works fine with me . Remove JSON.stringify(dataObject). it

问题 I have a timeseries chart created with C3. The chart has time gaps in the data, and this is very noticeable with a bar chart. Is it possible to remove the gaps? I render the chart as shown below. Notice how there's a gap between 2013-01-03 and 2013-01-06 var chart = c3.generate({ data: { x: 'x', type: 'bar', columns: [ ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-06', '2013-01-07', '2013-01-08'], ['data1', 30, 200, 100, 400, 150, 250] ] }, axis: { x: { type: 'timeseries', tick: {

问题 Is it possible to hide certain lines, bars and other graphic elements from a c3js chart, without unloading or hiding data? I wish to keep that data in the tooltip but hide some graphic elements. Hover over one bar and see data for other hidden bars. I know about the hide method - chart.hide(['data2', 'data3']); - but this also deletes the data from the tooltip. My question is not discussed in the documentation it seems. A similar issue in November was not solved. I don't have any code right

问题 My code is https://codesandbox.io/s/late-forest-cuwf7 I have 2 files : app.component.html and app.component.ts I display a chart which shows 1 belongs to one location and 1 belongs to another location. What I need is to display that particular record which belongs to the location onclick of the location region in chart. Say, if i click on Chennai region, I need to display the record in which location is chennai I tried to make use of onclick function of c3 for the same. Inside onclick,

问题 I am using the C3 JavaScript library for the display of graph data. When my page initially loads, the graphs are hidden. It isn't until a "tab" on the page is selected that the graphs display. The trouble I am seeing is that my first graph doesn't fit its containing div tag when first loaded. I can change the date range I'm viewing data for by clicking a button, at which time the graphs will be correctly sized. Here is the relevant HTML that I'm using for the graphs (notice that I am using

问题 I use the C3.js chart library, great work! But when I dynamically generate JSON data and load on the chart, the bars doesn’t show up. See the snippet code below: c3.generate({ bindto: '#chartFbPosts', data: { json: [{ "shares": 27, "likes": 241, "comments": 300 }, { "shares": 24, "likes": 220, "comments": 22 }, { "shares": 19, "likes": 208, "comments": 81 }], type: 'bar' } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://interestinate

问题 what I am trying to do is that I have a graph which loads completely at the moment I enter the button to show the data. The graph looks fine as Shown below : But I dont want to make the data looks static , what i want is to show the data as a realtime , as like an example I am showing Below. Just an Example I just want to make the data look like moving or live. Here id my code I am using to create the Chart : function createGraph(data) { var plots = ["plots Data"]; for (var i = 0; i < data

问题 In my current chart the x-axis values are illegible. how can I improve the presentation or at least that the intervals of the x values have a uniform separation. var chart = c3.generate({ data: { xs: { data1: "data2", data3: "data4" }, xSort: false, columns: [ ['data1', -4,3,4,7,8,9,8,7,3], ['data2', -5,2,3,4,5,4,3,2,1], ['data3', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10], ['data4', Math.random() * 10,Math.random() * 10

问题 i have chart like this I need to fill 3 area between dashed line. for example : fill area between 2 red dashed line, 2 blue dashed line and 2 green dashed line. I try do it like this: function fillArea(){ var d = {}; var x = []; var y1 = []; var y0 = []; for(var i = 0; i < chartJson.length; i++){ x.push(chartJson[i].run_date); y0.push(chartJson[i].diviationMinus); y1.push(chartJson[i].diviationPlus); } d.x = x; d.y1 = y1; d.y0 = y0; var area = d3.svg.area() .x(function(d) {return x(d.x); })