C3.js组合图表与时间序列 - 工具提示不起作用
问题描述:
我一直在尝试3天得到这张图表来显示我想要的方式。直到我意识到分组条形图号码关闭之前,所有事情都一直在运作。C3.js组合图表与时间序列 - 工具提示不起作用
示例:当底栏值等于10且顶栏值等于20时,分组栏的顶部显示为30.这是默认行为,但不是我想如何表示我的数据。我希望分组栏的顶部能够读取最高的数字,这导致我以我想要的方式代表数据。
重构我的逻辑后,this是我迄今为止。正如你所看到的,时间序列行被分解了,工具提示并没有渲染被悬停的数据组。
我的问题:
1)如何获得工具提示呈现所有三个数据点(数量,价格,搜索)
2)如何巩固时间序列行,以便它不会断开
任何帮助将不胜感激,所以我可以从这3天头痛!
以下是我的大部分代码 - 为简洁起见,不包括JSON数组,这可在我上面的jsfiddle链接中获得。预先感谢您的时间。
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x-axis',
type: 'bar',
json: json,
xFormat: '%Y-%m-%d',
keys: {
x: 'x-axis',
y: 'searches',
value: ['qty', 'searches', 'price']
},
types: {
searches: 'line'
},
groups: [
['qty', 'price']
],
axes: {
qty: 'y',
searches: 'y2'
},
names: {
qty: 'Quantity',
searches: 'Searches',
price: 'Price ($)'
},
colors: {
price: 'rgb(153, 153, 153)',
qty: 'rgb(217, 217, 217)',
searches: 'rgb(255, 127, 14)'
}
},
bar: {
width: {
ratio: 0.60
}
},
axis: {
x: {
type: 'timeseries',
label: { text: 'Timeline', position: 'outer-right' },
tick: {
format: '%Y-%m-%d'
}
},
y: {
type: 'bar',
label: {
text: 'Quantity/Price',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Searches',
position: 'outer-middle'
}
}
},
tooltip: {
grouped: true,
contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
var data = this.api.data.shown().map(function(series) {
var matchArr = series.values.filter(function(datum) {
return datum.value != undefined && datum.x === d[0].x;
});
if (matchArr.length > 0) {
matchArr[0].name = series.id;
return matchArr[0];
}
});
return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color);
}
}
});
答
1)如果我说得对,您希望工具提示显示所有值,即使其中一些值为空。 默认值为空值。您可以将它们替换为零(如果它适合您的任务),并使其可见。
而且,在我看来,有一个较短的方式来获得分组值:
var data = chart.internal.api.data().map(function(item) {
var row = item.values[d[0].index]; // get data for selected index
if (row.value === null) row.value = 0; // make null visible
return row;
});
2)我认为你是在谈论line.connectNull选项:
line: {
connectNull: true
}
更新
看起来像有重复的键休息工作api.data()方法。
您需要更改JSON结构,使键独特:
前:
var json = [
{"x-axis":"2017-07-17","qty":100},
{"x-axis":"2017-07-17","price":111},
{"x-axis":"2017-07-17","searches":1},
{"x-axis":"2017-07-18","qty":200},
{"x-axis":"2017-07-18","price":222},
{"x-axis":"2017-07-18","searches":2}
];
后:
var json = [
{"x-axis":"2017-07-17","qty":100,"price":111,"searches":1},
{"x-axis":"2017-07-18","qty":200,"price":222,"searches":2}
];
见fiddle。
哇,岩石对人非常接近!我喜欢connectNull选项,工作良好,工具提示实际上正在显示!不过,我很抱歉不清楚,但我不想在工具提示中返回空值。我相信过滤器方法的目的是删除任何空值以及不包含数据点,如果datum.x不等于d [0] .x(一个持有的日期值是悬停在上,而另一个是图表中的所有数据点)。理想情况下,悬停在酒吧上应该在工具提示中将当天的数量,价格和搜索进行分组。 – NightOwlPrgmr
我看到的唯一方法是让json键唯一,请参阅更新。 –
是的,这是我最初的json结构;然而,那么酒吧读取不正确(国际海事组织)。我知道这是“堆叠”条形图的默认行为,但我不希望两个(数量和价格)“添加” - 可以这么说。我希望他们互相重叠,所以2017-07-17栏上的浅灰色栏应该在100,而深灰色应该在111 - 而不是211.不知道这是否可行,但我看到它在我的OP中链接到的小提琴上工作,所以我想我会试试看。对此有何想法? – NightOwlPrgmr