标签: c3
来自json的饼图使用c3 js
以代码为例.
我需要生成一个具有4个分区(site1,site2 ...)的饼图,每个分区对应于其各自的上传值.
在上面的代码中,我无法实现这一点(我已指定值:['upload'])...
我必须指定的确切值是多少？
谢谢..
chart = c3.generate({
data: {
json: [
{name: 'www.site1.com', upload: 200},
{name: 'www.site2.com', upload: 100},
{name: 'www.site3.com', upload: 300},
{name: 'www.site4.com', upload: 400},
],
keys: {
// x: 'name', // it's possible to specify 'x' when category axis
value: ['upload'],
},
type:'pie'
},
axis: {
x: {
// type: 'category'
}
}
});
推荐指数
解决办法
查看次数
d3在饼图上显示数字而不是百分比
我正在绘制一个图表,以显示有多少人完成了我们的应用程序以及有多少人未能完成所有步骤.为此,我的公司决定使用库d3来显示图表.但是,在饼图上他们想要显示整数而不是默认百分比,我似乎无法找到任何关于此的文档.
我的代码看起来像这样
c3.generate({
bindto: '.pieChart',
data: {
columns: [
['Started', Started],
['Completed', Completed]
],
type: 'pie'
}
});
任何帮助,将不胜感激!
推荐指数
解决办法
查看次数
如何在d3中悬停时增加饼段的大小
我用d3创建了饼图.如何在悬停时增加饼段的大小？正如你所看到的,绿色部分是如此之小,所以我想改变它的大小,如红色段.我怎样才能做到这一点？
我的代码:
var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();
var data = [{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":30},
{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":30},
{"label":"Category A", "value":20},
{"label":"Category B", "value":50},
{"label":"Category C", "value":5}];
var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
var arcOver …推荐指数
解决办法
查看次数
C3.js制作线显示为虚线
我使用两个Y轴使用C3.js.我有2个数据系列:
data: {
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, null, 230],
[80, null, 300],
[90, null, 320],
],
regions: {
'data1': [{'start':0, 'style':'dashed'},],
}
}
当我运行这个时,我得到一条虚线,然后它沿着x轴作为虚线绘制为null.这不是我想要的.我希望它在数据集为空时停止绘图.如果我删除该区域,我会得到我想要的功能,但我没有得到虚线.
有没有办法获得虚线而不绘制空值？
推荐指数
解决办法
查看次数
使用c3.js创建自定义甜甜圈或饼图
尝试使用c3.js创建以下内容.
我们在整个应用程序中使用相同的图表库,因此希望保持一致.没有在c3.js找到一种方法来定制甜甜圈或饼图来获得这个.非常感谢任何帮助或指示.
推荐指数
解决办法
查看次数
为什么不出现C3图表？
我试图创建一个简单的图表,它只是不起作用.任何帮助都会很棒.我按照C3.js文档网站上的说明进行操作,但我仍然得到一个空白页面.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
推荐指数
解决办法
查看次数
是否可以一起使用C3和D3？
推荐指数
解决办法
查看次数
如何在c3js中设置样式线图表点的样式
我有一个一般的c3js问题.我试图让C3JS折线图中的点"空心"(白色填充,带有彩色笔划),但我很难搞清楚如何做到这一点.我试图添加自己的CSS,但它被stylehtml中的直接标记覆盖.
有没有人有什么建议？
谢谢!
推荐指数
解决办法
查看次数
如何在Donut Legend中的C3.js中显示值？
这里有一个简单的示例屏幕截图，您可以在其中查看甜甜圈图。
是否可以在图表的图例中显示真实值（而不是％计算得出的值），如屏幕截图中用红色箭头标记的？
每个人都希望在观看图像时知道“ 22.7％”，因此是否有任何解决方案可以显示数据行的总和（例如我在屏幕快照中伪造的箭头），或者显示所有数据的总和-行？
问候，
弗洛里安
推荐指数
解决办法
查看次数
使用canvg将C3.js SVG可视化到Canvas - 用黑色矩形填充的折线图,"ERROR:Element'parsererror'尚未实现"
我正在尝试使用Canvg将SVG转换为Canvas.这是jsfiddle.我收到一个错误,"错误:元素'parsererror'尚未实现".我可以理解canvg库无法解析SVG元素.但是,这个问题有解决方案吗？我需要从svg元素创建一个canvas元素.
<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>
<script src="lib/c3.min.js"></script>
<script type="text/javascript" src="lib/canvg.js"></script>
<script type="text/javascript" src="lib/rgbcolor.js"></script>
</head>
<body>
<div id="chart"></div>
<button onclick="myFunction()">Save</button>
<header><h1>Canvas:</h1></header>
<canvas id="svg-canvas"></canvas>
<script>
var chart = {};
chart = c3.generate({
bindto: '#chart',
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', '2013-01-01 03:11:37', '2013-01-02 03:11:37', '2013-02-03 03:11:37', '2013-03-04 03:11:37', '2013-03-05 03:11:37', '2013-04-06 03:11:37'],
['x2', '2013-01-04 03:11:37', '2013-01-22 03:11:37', '2013-04-13 03:11:37', '2013-05-04 03:11:37', '2013-05-02 03:11:37', '2013-06-06 03:11:37'],
['data1', 30, 200, …推荐指数
解决办法
查看次数