标签: c3
在数据事件中访问c3js中的数据值
我想弄清楚,如果有办法从事件中的Company数据数组访问值onclick.到目前为止使用的api函数我只能访问Users数组.
var chartCompany = c3.generate({
bindto: '#users-chart',
data: {
x: 'Company',
url: '/ajax_call',
mimeType: 'json',
type: 'bar',
axes: {
Company: 'x'
},
onclick: function (d, i) { console.log(chartCompany.data()); }
},
axis: {
x: {
type: 'category',
show: false
},
}
});
来自服务器的json响应:
{
"Company": ["Company 1", "Company 2", "Company 2"],
"Users" : [10, 20, 30]
}
任何帮助/想法将受到高度赞赏.
[编辑1]详细说明我的问题:当点击用户的数据(显示为条形图)时,我想获得相应的公司.
[编辑2]工作静态示例:http://jsfiddle.net/et37a9t2/
推荐指数
解决办法
查看次数
c3.js如何获取DataGroups的onclick事件
我一直在使用c3.js并且无法弄清楚如何为X轴上显示的数据组标签的onClick获取JavaScript事件.
基本上我需要事件,我可以在下面的Circled区域注册一个事件处理程序.
推荐指数
解决办法
查看次数
c3在黑暗的背景图; 如何更改轴和刻度值颜色
我在深色背景上绘制了一个图形,但由于轴颜色和刻度值颜色,它很难读取.如何将轴的颜色,刻度线和轴刻度值更改为白色？
推荐指数
解决办法
查看次数
使用c3可视化图表
我试图重现一些代码使用c3生成图表.但是,此脚本不会呈现任何内容.为什么？(href中列出的文件位于同一文件夹中)
<!DOCTYPE html>
<html>
<head>
<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<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.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
推荐指数
解决办法
查看次数
如何删除c3js折线图中的轴线溢出
如果你看一下那些红色圆圈区域，你会看到左下角的轴溢出，并且在 Y 轴的顶部和 X 轴的末端有轴刻度。
我为轴和 c3 图表配置唯一的自定义 CSS：
.tick line {
display: none;
}
var rateConfig = {
bindto: '#line-chart',
data: {
x: 'date',
xFormat: '%m%d',
columns: [],
},
legend: {
show: false,
},
point: {
r: 4,
},
axis: {
y: {
tick: {
format: function (d) { return d + '%'; },
count: 5,
},
max: 100,
padding: {
top: 0,
bottom: 0,
},
},
x: {
type: 'timeseries',
tick: {
culling: false,
},
},
},
color: …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何在c3.js散点图中添加标签？
是否可以添加标签来分散c3.js中的绘图点,就像在这个谷歌图表示例中一样？
https://google-developers.appspot.com/chart/interactive/docs/gallery/bubblechart#javascript
推荐指数
解决办法
查看次数
c3 js:我如何按年份在X轴标签上分组？
使用c3 js库获取图表(c3js.org).我试图获得类似于这个图表的东西(即,在Q1,Q2,Q3,Q4之后的2011年,2012年,2013年分别添加年份标签)
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'
}
}
}
});
以年 - 月 - 日格式显示每个标签中带有年份的x轴.我想在标签的第一行显示月份和日期,在下一行显示年份(不重复).有一些像:
format: function(){
var label = '%m-%d';
if(year!written)
label +='%Y';
return label;
}
推荐指数
解决办法
查看次数
c3js - D3js - 在简单的条形图中自定义标签
提供一些上下文的最佳方式可能是显示代码:
http://jsfiddle.net/ron_camaron/baa0q55j/12/
var arrayOfDates = ['Jun 2015', 'May 2015', 'Mar 2015', 'Feb 2015', 'Jan 2015', 'Dec 2014'];
var arrayOfData = [7.25, 10.001, 10, 8.39, 10.002, 6.76]
var cautionColor = '#AB2522';
var bronzeColor = '#8C7853';
var silverColor = '#CCCCCC';
var goldColor = '#FFCC00';
var neutralColor = "#ffffff";
var chart = c3.generate({
bindto: '#divForGraph_1',
size: {
height: 203,
width: 380
},
data: {
columns: [
['period'].concat(arrayOfData)
]
,
types: {
period: 'bar'
}
,
labels: true
,
names: {
period: 'Scoring Table' …推荐指数
解决办法
查看次数
JSON数据聚合的最佳实践是什么？
假设我有以下格式的数据集:
var smallTestData = [
{"YEAR": "2009", "MONTH": "1", "CUSTOMER": "Customer1", "REVENUE": "1938.49488391425"},
{"YEAR": "2009", "MONTH": "1", "CUSTOMER": "Customer2", "REVENUE": "75.9142774343491"},
{"YEAR": "2009", "MONTH": "1", "CUSTOMER": "Customer2", "REVENUE": "99.3456067931875"} ...];
现在,如果我想绘制一个D3或C3图表来显示每个客户每年和每月的累计收入,我想我最终会得到这样的结果:
[{"yearMonth":"2009 1","revenueCustomer1":158989,"revenueCustomer2":68181},
{"yearMonth":"2009 2","revenueCustomer1":171217,"revenueCustomer2":204975},
{"yearMonth":"2009 3","revenueCustomer1":38477,"revenueCustomer2":46605} ...];
当然,这看起来并不优雅,但那没什么.最糟糕的部分是基于多维度(例如,年,月,客户)的度量(例如收入)的聚合,这对于JSON数据来说是一件痛苦的事情.
我已经尝试编写自己的聚合函数来解决这个问题,但除了手动将值一起添加之外,找不到任何令人满意的解决方案.谁能引导我朝着正确的方向前进？您将如何汇总数据以适应我所描述的图表类型？有没有现成的解决方案？
既然我们正在讨论这个话题,您将如何基于主键加入两个或更多数据集？
谢谢!
推荐指数
解决办法
查看次数
更改 C3 图表中的 Y 轴标签
是否可以更改或分类 C3 折线图中的 Y 轴标签。
是否可以将 Y 轴标签分类并显示为“初级”、“中级”、“高级”和“精通”，其中值分别介于 0-25、25-50、50-75、75-100 之间?
推荐指数
解决办法
查看次数
C3.js - 向Timeseries图表添加右边距
我想知道是否有办法在Timeseries图表上添加正确的填充C3.js.
正如你在C3js.org 上看到的这个例子,日期标签在右边被截断.或者看下面的图片:
推荐指数
解决办法
查看次数