c3.js

Need to display none or not generate chart marks

末鹿安然 提交于 2019-12-11 16:42:41
问题 This CSS is working for remove marks... #mychart .c3-circles-avg2017, #mychart .c3-circles-avg2018 { display: none; } is a ugly way to do it , because all configs and chart definitions are at Javascrpt. I need to do by Javascript , ideal is to use C3 or D3... I try D3 and it is not working : d3.selectAll('#mychart .c3-circles-avg2017').style("display","none"); d3.selectAll('#mychart .c3-circles-avg2018').style("display","none"); how to obtain same CSS effect by Javascript? (or say to C3 not

Add a title to C3.js chart legend

我们两清 提交于 2019-12-11 13:58:40
问题 I am using c3js and I'm still new to this chart framework. I need to set a title to the series legend of my chart. How can I do this? Do I need to use D3 to implement this? Thanks in advance. 回答1: How about this mess: var firstLegend = d3.select(".c3-legend-item"); var legendCon = d3.select(firstLegend.node().parentNode); var legendY = parseInt(firstLegend.select('text').attr('y')); legendCon .append('text') .text('Legend Title') .attr('y', legendY - 20); 来源: https://stackoverflow.com

How to remove padding in c3.js?

馋奶兔 提交于 2019-12-11 12:13:18
问题 Is there a way to remove the left padding, between the Y-axis and the first value in C3.js? If so, how can I do this? 回答1: From the docs, it looks like you can add an axis.x.padding setting, like so: axis: { x: { padding: { left: 0, right: 0, } } } Here is a fiddle: http://jsfiddle.net/cnp4de61/ (the padding stuff near the top of the code apparently for the overall chart within the page). 来源: https://stackoverflow.com/questions/32445750/how-to-remove-padding-in-c3-js

How to get rounded columns in c3.js bar chart

被刻印的时光 ゝ 提交于 2019-12-11 10:14:11
问题 I was wondering if anyone know how to round the corners of the columns in a c3.js bar chart? The hacks I have found online, doesn't seem to work, so I hope somewhere here can help! Thank you :) var mph_chart = c3.generate({ bindto: '#mph_chart', padding: { top: 10, right: 50, bottom: 10, left: 190 }, bar: { width: 35, }, color: { pattern: ['#3366ff'] }, data: { x: 'x', labels:true, columns: [ ['x', 'Porsche Macan','Porsche Macan S','Porsche Macan S Diesel','Porsche Macan Turbo','Porsche Macan

add data to chart using c3.js

只谈情不闲聊 提交于 2019-12-11 09:25:08
问题 I have a chart, in which I would like to add more data without replacing the data I have, either with a .push or adding a set of data without losing the ones I previously have. How can I do it? columns: [ ['data1', -4,3,4,7,8,9,8,7,3], ['data1_x', -5,2,3,4,5,4,3,2,1], . . . //I need add the new data withouth remove the previous data chart.load({ xs: { data1: 'data1_x' }, columns: [ ["data1_x", 3,6], ["data1", 5,8] ] }); https://jsfiddle.net/aL8xhgpn/ 回答1: You can move the data into an array

Chart arcs shrink after refresh

て烟熏妆下的殇ゞ 提交于 2019-12-11 07:32:33
问题 I have a donut chart where certain pieces of the donut sticks out. Here is the screen shot. The orange, red and blue arcs are sticking out and I want them to stick out permanently however when I hover over any of the pieces they shrink and become normal like this. we are using a timeout function to make the pieces stick out: setTimeout(function () { chart.internal.expandArc(['A', 'B', 'D']) }, 0) Here is my FIDDLE I was wondering if this is a JavaScript issue or how i can possibly change this

c3js › value 0 aligned between Y and Y2

南楼画角 提交于 2019-12-11 06:19:43
问题 How to align the Y 0 axis value to Y2 0 axis value? See jsFiddle to understand. I tried the option center:0 on the axe's but i don't want 0 on center of graph.. var chart = c3.generate({ data: { columns: [ ['data1', 2000, 350, 300, -200, -50, 0], ['data2', 130, 100, 140, 200, 150, 50] ], types: { data1: 'line', data2: 'bar' }, axes:{ data1:'y', data2:'y2' } }, axis: { y: { padding: {bottom: 0} }, y2: { show:true, padding: {bottom: 0} }, x: { min: 0, show: true } }, grid: { x: { show: false },

How to load C3JS properly into WebPack?

时光怂恿深爱的人放手 提交于 2019-12-11 05:29:18
问题 I am trying to use C3JS, which is a library based on D3JS in my VUEJS/WebPack project (created from this boilerplate). I load D3JS by npm installing it and by loading it as a webpack plugin like anything else. However, doing the same for C3JS does not work. plugins: [ new webpack.ProvidePlugin({ $: 'jquery', // <--- This works, I can call this variable anywhere in my JS code jQuery: 'jquery', // <--- This works... d3: 'd3', // <--- This works... c3: 'c3' // <--- This DOES NOT work, I can

Get Value Data Hidden On C3js

陌路散爱 提交于 2019-12-11 02:04:15
问题 I'am using chart plugins from c3js.org like this: data: { x : 'x', columns: [['data1',10,20,30],['data2',40,28,10]] type: 'bar', hide: ["hide1","hide2"], onclick: function(d,i){ console.log(d); }, labels: true }, Is there a way to get value from data hidden above? Thanks before, and sorry for bad my english. 回答1: Are you trying to hide the data, or get the value of the hide array from the click event? If the latter, in the onclick event, you can use: this.data.shown() to get the array of

c3js - having the X axis in the middle of the chart

人走茶凉 提交于 2019-12-10 22:31:39
问题 Is it possible to have the X axis in the middle of the graph? When having Y values both negative and positive - and the X axis is on the 0 value lets say similar to this image 回答1: Positioning C3 x axis at a Desired y Value Method 1 Note that this method won't work if you have a .load() - see Method 2. You can override the chart's getTranslate function to do this, like so // get the original translate function var originalTranslate = chart.internal.getTranslate; chart.internal.getTranslate =