c3.js

问题 I'm trying to enable the ability to right click on a data point on the chart. It seems to implement this feature two things need to happen: Add a listener for the right click even "context menu" event. l looked at #1952 where they added a listener for the double click event. I'm assuming that you would do that same. Once there is a hook for it, I can then get the x and y coordinate and overlay a custom dev menu. Question: Is this the best approach for this or is there any easier way? Is there

问题 I have a bar plot with inverted X/Y Axes. Here is my code and output: var myData = {}; myData.x = 'x'; myData.xFormat = "%Y-%m-%d"; myData.type = 'bar'; myX = app.reportsCollection.countedByDay.plotData.X; myY = app.reportsCollection.countedByDay.plotData.Y; myX.splice(0,0,'x'); myY.splice(0,0,'Nuevos Reportes'); myData.columns = []; myData.columns.push(myX); //http://stackoverflow.com/a/586189/1862909 myData.columns.push(myY); var chart = c3.generate({ bindto: elementID, data: myData, size:

问题 How to update the default line width in a C3.js graph? How to update the tick (the circles) color? 回答1: If you use a DOM inspector you can see what classes the different objects have and then it's just a case of assigning some CSS to them e.g. .c3-line { stroke-width: 2px; } .c3-circle { fill: red !important; } 回答2: For case of increasing scatterplot circle radius, radius of circles on line charts. Please use like this: c3.generate({ ... point: { r: 10, }, ... }) 回答3: As per documentation you

问题 I have a scatter plot charge where i want to change the size of the dots to make them look like bubble. Can someone show me how to change size of the bubble? Here is my code: var chart = c3.generate({ data: { xs: { IBM: 'ibm_x', Microsoft: 'microsoft_x', }, columns: [ ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5

问题 I have a scatter plot charge where i want to change the size of the dots to make them look like bubble. Can someone show me how to change size of the bubble? Here is my code: var chart = c3.generate({ data: { xs: { IBM: 'ibm_x', Microsoft: 'microsoft_x', }, columns: [ ["ibm_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5

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

问题 I started working on react-c3js and got stuck into some problem. Below is my X-axis array: "axis": {"x": ["4 2018", "4 2018", "5 2018", "5 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018",

问题 I have a piechart using C3. I have changed the default legend names by adding values and percentages and now. I am looking for a way to format this legend nicely so that the values and percentages are positioned like columns. Is there a way to prevent the labels from overlapping? This is how far I got so far: var columns = ['data11', 'data2', 'data347', 'data40098']; var data = [150, 250, 300, 50]; var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B']; var padding = 5; var

问题 I have a c3/d3 step chart with some boolean values. Now I need to align the step change on the actual event timestamp and not in the middle of that event. Is there any config option so c3 step chart changes the line from 0 to 1 exactly when the event occurs? 回答1: It seems that you're talking about line.step.type option: var chart = c3.generate({ data: { columns: [ ['data1', 300, 350, 300, 0, 0, 100] ], types: { data1: 'step' } }, // that's it: line: { step: { type: 'step-after' } } }); 来源：

问题 I have a c3/d3 step chart with some boolean values. Now I need to align the step change on the actual event timestamp and not in the middle of that event. Is there any config option so c3 step chart changes the line from 0 to 1 exactly when the event occurs? 回答1: It seems that you're talking about line.step.type option: var chart = c3.generate({ data: { columns: [ ['data1', 300, 350, 300, 0, 0, 100] ], types: { data1: 'step' } }, // that's it: line: { step: { type: 'step-after' } } }); 来源：