c3.js | 易学教程

C3 chart sizing is too big when initially loaded

阅读更多关于 C3 chart sizing is too big when initially loaded

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 AngularJS, in case that helps/hinders things at all): <div class="chartgrouping"> <div ng-show=

C3JS - Cannot read property 'category10' of undefined

阅读更多关于 C3JS - Cannot read property 'category10' of undefined

I tried this c3.js code from jsfiddle ( https://jsfiddle.net/varunoberoi/mcd6ucge ) but it doesn't seem to work in my localhost. I'm using uniserver as my server. I copy-paste everything but it's not working. <html> <head>  <link href="css/c3.css" rel="stylesheet" type="text/css" />  <script src="js/d3.min.js" type="text/javascript"></script> <script src="js/c3.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){ var chart = c3.generate({ data: { columns: [ ['data1', 300, 350, 300, 0, 0, 0], ['data2', 130, 100, 140, 200,

How to change tooltip content in c3js

阅读更多关于 How to change tooltip content in c3js

I'm working on a timeline display and I have data that I want to show on the tooltip. currently it only shows the value at each time. and I cannot find a way to change it. the example below shows how to change the value's format but not what values are displayed var chart = c3.generate({ data: { columns: [ ['data1', 30000, 20000, 10000, 40000, 15000, 250000], ['data2', 100, 200, 100, 40, 150, 250] ], axes: { data2: 'y2' } }, axis : { y : { tick: { format: d3.format("s") } }, y2: { show: true, tick: { format: d3.format("$") } } }, tooltip: { format: { title: function (d) { return 'Data ' + d; }

C3.js - Timeseries with time fails to parse

阅读更多关于 C3.js - Timeseries with time fails to parse

问题 I want to display a time series chart with C3.js using a date in the format 2015-09-17 18:20:34 and the format string '%Y-%m-%d %H:%M:%S' but it fails to parse. My code: var chart = c3.generate({ bindto: '#chart', data: { x: 'times', columns: [ ['times','2015-09-17 18:20:34','2015-09-17 18:25:42','2015-09-17 18:30:48'], ['data','1539','1546','1546','1550'] ] }, axis: { x: { type: 'timeseries', tick: { format: '%Y-%m-%d %H:%M:%S' } } } }); And I get the following error: 02:26:44.889 Failed to

C3JS - Cannot read property 'category10' of undefined

阅读更多关于 C3JS - Cannot read property 'category10' of undefined

问题 I tried this c3.js code from jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge) but it doesn't seem to work in my localhost. I'm using uniserver as my server. I copy-paste everything but it's not working. <html> <head>  <link href="css/c3.css" rel="stylesheet" type="text/css" />  <script src="js/d3.min.js" type="text/javascript"></script> <script src="js/c3.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){ var chart

How to change tooltip content in c3js

阅读更多关于 How to change tooltip content in c3js

问题 I'm working on a timeline display and I have data that I want to show on the tooltip. currently it only shows the value at each time. and I cannot find a way to change it. the example below shows how to change the value's format but not what values are displayed var chart = c3.generate({ data: { columns: [ ['data1', 30000, 20000, 10000, 40000, 15000, 250000], ['data2', 100, 200, 100, 40, 150, 250] ], axes: { data2: 'y2' } }, axis : { y : { tick: { format: d3.format("s") } }, y2: { show: true,