c3 | 易学教程

c3.js how to get a onclick event for DataGroups

阅读更多关于 c3.js how to get a onclick event for DataGroups

问题 I have been using c3.js and cant figure out how to get a JavaScript event for onClick of the Data group labels which is displayed in X Axis. Basically i need event to which I can register a event handler in the below Circled area. 回答1: There is no method, as of yet, in c3js for adding onClick events on ticks. But you can directly use d3: d3.selectAll('.tick') .on('click', function(value,index){ alert('You clicked a tick.'); }); This will add an event that will fire when you click a tick.

need to set back ground color for c3 sub chart or make it less transparent than main chart

阅读更多关于 need to set back ground color for c3 sub chart or make it less transparent than main chart

问题 When I am using sub chart, one problem I am facing with user experience is both Main chart and Sub chart are of same importance, I mean same color, etc Instead what I expect is the sub chart should be less transparent or should be provided an option to set back ground color for sub chart. Is it possible? I don't see any option to set back ground color for the sub chart on documentation page. Any guidance please ... 回答1: You'd need to style it manually. I don't see that C3 uses any particular

How to remove gaps in C3 timeseries chart?

阅读更多关于 How to remove gaps in C3 timeseries chart?

问题 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: {

Visualizing a chart using c3

阅读更多关于 Visualizing a chart using c3

问题 I am trying to reproduce some code to generate a chart using c3. This script does not render anything though. Why? (the files listed in href are in the same folder) <!DOCTYPE html> <html> <head>  <link href="c3.css" rel="stylesheet" type="text/css">  <script src="d3.v3.min.js" charset="utf-8"></script> <script src="c3.min.js"></script> <meta charset="UTF-8"> <title>title </title> </head> <body> <div id="chart"></div> <script> var chart = c3

C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , “ERROR: Element 'parsererror' not yet implemented”

阅读更多关于 C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , “ERROR: Element 'parsererror' not yet implemented”

问题 I am attempting to convert a SVG to Canvas using Canvg. Here is the jsfiddle. I get an error saying, "ERROR: Element 'parsererror' not yet implemented". I can understand that the canvg library is not able to parse the SVG element. But, Is there a solution to this problem ? I need to create a canvas element from svg element. <head> <link href="lib/c3.css" rel="stylesheet" type="text/css"> <script src="lib/jquery-2.1.4.min.js"></script> <script src="lib/d3.min.js" charset="utf-8"></script>

c3 js: How can I group by Year on the X-axis labels?

阅读更多关于 c3 js: How can I group by Year on the X-axis labels?

问题 Using c3 js library for charts (c3js.org). I'am trying to achieve something similar to this chart (i.e., add year label 2011, 2012, 2013 on a seperate line after Q1, Q2, Q3, Q4) var chart = c3.generate({ data: { x: 'x', columns: [ ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2014-01-04', '2014-01-05', '2014-01-06'], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350] ] }, axis: { x: { type: 'timeseries', tick: { format: '%Y-%m-%d' } } } }); show's the x axis

c3 js: How can I group by Year on the X-axis labels?

阅读更多关于 c3 js: How can I group by Year on the X-axis labels?

Scatter plot size on “tooltip”

阅读更多关于 Scatter plot size on “tooltip”

问题 How to retrieve the radius (or size) of a scatter plot on tooltip. r : function(d) { if (d.value != null) { var size = datajson[k++]["total"]; return size; } I have done something like this..So the tooltip should show the size when i point on that bubble. How to achieve this? thanks 回答1: You can add the size to the d object r: function (d) { if (d.value != null) { var size = datajson[k++]["total"]; d.size = size; return size; } } and retrieve it when you show your tooltip tooltip: { contents:

How do I use/retrieve the C3 scale function post generate?

阅读更多关于 How do I use/retrieve the C3 scale function post generate?

问题 I am using C3 to generate a chart and have found it necessary to dig into the underlying D3 constructs to supplement its functionality. I'm at an impasse and need to draw a region that is both limited by the x values and the y values but the "regions" functionality of C3 only allows one or the other. So, I need to draw on the C3-generated chart a rect at the appropriate location but using the scale functions to determine the X/Y values of the new rect. Is there any way to do this with C3 or

c3 js: How can I group by Year on the X-axis labels?

阅读更多关于 c3 js: How can I group by Year on the X-axis labels?

Using c3 js library for charts (c3js.org). I'am trying to achieve something similar to this chart (i.e., add year label 2011, 2012, 2013 on a seperate line after Q1, Q2, Q3, Q4) var chart = c3.generate({ data: { x: 'x', columns: [ ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2014-01-04', '2014-01-05', '2014-01-06'], ['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350] ] }, axis: { x: { type: 'timeseries', tick: { format: '%Y-%m-%d' } } } }); show's the x axis with year in each label in the format year-month-day. I want to show just the month and date on first