更改提示格式
问题描述:
我有这样一个图表我的网页上:更改提示格式
var chart = c3.generate({
data: {
columns: [
['data1', 30000, 20000, 10000, 40000, 15000, 250000],
['data2', 100, 200, 100, 40, 150, 250]
],
axes: {
data2: 'y2'
}
},
axis : {
y : {
tick: {
format: d3.format("s")
}
},
y2: {
show: true,
tick: {
format: d3.format("$")
}
}
},
tooltip: {
format: {
title: function (d) { return 'Data ' + d; },
value: function (value, ratio, id) {
var format = id === 'data1' ? d3.format(',') : d3.format('$');
return format(value);
}
//value: d3.format(',') // apply this format to both y and y2
}
}
});
它工作正常,但我有一个按钮,更改数据:
$('#filter').on('click', function(event) {
event.preventDefault();
chart.load({
unload: true,
columns: [
['data1', 70, 100, 140, 80],
['data2', 30, 140, 40, 80]
]
});
});
后,更改我想更改工具提示格式,但我找不到更改和更新它的方法。每次有人点击按钮时,是否可以在不重新创建图表的情况下进行操作?
答
要记住的关键是标题,格式等是每次显示工具提示时运行的函数 - 因此所有需要做的就是将逻辑引入那些允许切换所需格式的函数中。
在你的情况下,也许你可以使用一个简单的变量来表示格式为数字。例如在您的格式功能
var format = 1;
然后设置条件,然后...
tooltip: {
format: {
title: function (d) {
if(format === 1) return 'Data ' + d;
if(format === 2) return 'New Data ' + d;
},
// etc ...
}
}
最后设置要当您单击格式...
$('#filter').on('click', function(event) {
event.preventDefault();
format = 2; // simple
chart.load({
unload: true,
columns: [
['data1', 70, 100, 140, 80],
['data2', 30, 140, 40, 80]
]
});
});
显然,这是一个非常简单的例如,但主体保持不变 - 将逻辑设置为用于显示工具提示的运行时函数中所需的格式 - 这样,您可以更改它们的显示方式,而无需每次重新创建图表。
在对象层次结构中没有理由无法采用函数方法级别或更高级别 - 例如格式或工具提示级别。
无论何时需要某个对象或值 - 只要它根据需要返回该类型,就可以始终使用该函数。例如
var formatx = { ... }
tooltip: {
format: function() {
switch(format) {
case 1: return { ... },
case 2: return formatx,
...
}
}
}
不用担心 - 很高兴有帮助。 – Fraser