Javascript 如何更改c3js中的工具提示内容
我正在处理时间线显示,我有数据要显示在工具提示上。目前它只显示每次的值。我找不到改变它的方法。下面的示例显示如何更改值的格式,但不显示哪些值Javascript 如何更改c3js中的工具提示内容,javascript,d3.js,c3.js,Javascript,D3.js,C3.js,我正在处理时间线显示,我有数据要显示在工具提示上。目前它只显示每次的值。我找不到改变它的方法。下面的示例显示如何更改值的格式,但不显示哪些值 var chart = c3.generate({ data: { columns: [ ['data1', 30000, 20000, 10000, 40000, 15000, 250000], ['data2', 100, 200, 100, 40, 150, 250] ], axes: {
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
}
}
});
它是从
他们承认没有内容编辑的例子,但我在参考资料或论坛中找不到任何内容,而是建议更改代码(在这里:第300行)和以下内容:
__tooltip_contents = getConfig(['tooltip', 'contents'], function (d, defaultTitleFormat, defaultValueFormat, color) {
var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat,
nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; },
valueFormat = __tooltip_format_value ? __tooltip_format_value : defaultValueFormat,
text, i, title, value, name, bgcolor;
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
bgcolor = levelColor ? levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
})
\u工具提示内容=getConfig(['tooltip','contents',],函数(d,defaultTitleFormat,defaultValueFormat,color){
var titleFormat=\uuuuuu工具提示\uu格式\uu标题?\uuuu工具提示\uu格式\uu标题:defaultTitleFormat,
nameFormat=\uuuuuuToolTip\uFormat\uName?\uuuuToolTip\uFormat\uName:函数(名称){return name;},
valueFormat=\工具提示\格式\值?\工具提示\格式\值:defaultValueFormat,
文本、i、标题、值、名称、颜色;
对于(i=0;i
有人试图这样做吗?开发了一些功能来促进流程?有没有关于如何正确操作的提示?我不知道如何更改它们的代码,因为我可以使用更多的数据或与函数获得的d值不同的数据。如果使用函数getTooltipContent,并将其添加到图表声明中的tooltip.contents中,您将拥有与默认值相同的工具提示内容 您可以对此代码进行更改,并根据需要对其进行自定义。一个细节,因为当前范围中没有定义
CLASS
,但它是部分图表对象,我用CLASS
替换了$$。CLASS
,也许您甚至不需要在代码中使用这个对象
var chart = c3.generate({
/*...*/
tooltip: {
format: {
/*...*/
},
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value, name, bgcolor;
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
}
}
});
var图表=c3.generate({
/*...*/
工具提示:{
格式:{
/*...*/
},
内容:函数(d、defaultTitleFormat、defaultValueFormat、color){
var$$=this,config=$$.config,
titleFormat=config.tooltip_format|u title | | defaultTitleFormat,
nameFormat=config.tooltip_format_name | |函数(name){return name;},
valueFormat=config.tooltip_format_value | | defaultValueFormat,
文本、i、标题、值、名称、颜色;
对于(i=0;i
如果要控制工具提示渲染并根据数据值使用默认渲染,可以使用类似以下内容:
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
if (d[1].value > 0) {
// Use default rendering
return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color);
} else {
return '<div>Show what you want</div>';
}
},
format: {
/**/
}
}
工具提示:{
内容:函数(d、defaultTitleFormat、defaultValueFormat、color){
如果(d[1]。值>0){
//使用默认渲染
返回此.getTooltipContent(d,defaultTitleFormat,defaultValueFormat,color);
}否则{
返回“显示所需内容”;
}
},
格式:{
/**/
}
}
在我的例子中,我必须在工具提示中为日期值(x轴)添加日期。最后我想出了下面的解决方案
js和css的参考资料
函数toDate(dateStr)
{
var number=dateStr.match(/\d+/g);
返回新日期(数字[0],数字[1]-1,数字[2]);
}
函数GetMonthFromString(月)
{
变量月份={'一月':'01','二月':'02','三月':'03','四月':'04',
‘五月’:‘05’、‘六月’:‘06’、‘七月’:‘07’、‘八月’:‘08’、‘九月’:‘09’,
‘十月’:‘十’、‘十一月’:‘十一’、‘十二月’:‘十二’};
返回月份[月份];
}
函数GetFullDayName(formatteddate)
{
var weekday=新数组(7);
工作日[0]=“周日”;
工作日[1]=“周一”;
工作日[2]=“星期二”;
工作日[3]=“星期三”;
工作日[4]=“周四”;
工作日[5]=“周五”;
工作日[6]=“周六”;
var dayofdate=工作日[formatteddate.getDay()];
返回日期;
}
//x轴、ON小时和AvgHours的图表数据
函数CollectChartData()
{
var xData=新数组();
var onHoursData=新数组();
var averageHoursData=新数组();
var instanceOccuringDatesArray=[“2017-04-20”、“2017-04-21”、“2017-04-22”、“2017-04-23”、“2017-04-24”、“2017-04-25”、“2017-04-26”、“2017-04-27”、“2017-04-28”、“2017-04-29”、“2017-04-30”、“2017-05-01”、“2017-05-02”、“2017-05-03”、“2017-05-04”、“2017-05-05-05”、“2017-05-05-06”、“2017-05-05-05-07”、“2017-05-05-05-05-08”、“2017-05-05-05-05-05-11”,"2017-05-14","2017-05-15","2017-05-16","2017-05-17","2017-05-18","2017-05-19","2017-05-20"];
var EngineOnHourArray=[“4.01”、“14.38”、“0.10”、“0.12”、“0.01”、“0.24”、“0.03”、“6.56”、“0.15”、“0.00”、“1.21”、“2.06”、“8.55”、“1.41”、“0.03”、“1.42”、“0.00”、“3.35”、“0.02”、“3.44”、“0.05”、“5.41”、“4.06”、“0.02”、“0.02”、“0.04”、“7.26”、“1.02”、“5.09”、“0.00”];
var avgUtilizationArray=[“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”、“2.29”。
data: {
classes: {
data1: [{prop1: 10, prop2: 20}, {prop1: 30, prop2: 40}],
data2: [{prop1: 50, prop2: 60}'{prop1: 70, prop2: 80}]
}
}
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
const $$ = this;
const config = $$.config;
const meta = config.data_classes;
...
for (i = 0; i < d.length; i++) {
if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
if (! text) {
...
}
const line = d[0].id;
const properties = meta.classes[line];
const property = properties? properties[i] : null;
if (property ) {
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>PROP1</td>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + property.prop1 + "</td>";
text += "</tr>";
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>PROP2</td>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" +
property.prop2+ " cm/s</td>";
:tooltip {
:contents
(fn [d default-title-format default-value-format color]
(this-as this
(let [this-CLASS (js->clj (.-CLASS this) :keywordize-keys true)
tooltip-name-class (:tooltipName this-CLASS)
rows (js->clj d :keywordize-keys true)
title-row (->> (first rows) (#(str "<table class='" (:tooltip this-CLASS)
"'><tr><th colspan='2'>"
(default-title-format (:x %)) "</th></tr>")))
data-rows (->> rows
(map #(str "<tr class='" tooltip-name-class "--" (:id %) "'>"
"<td class='name'><span style='background-color:"
(color (:id %)) "'></span>" (:name %) "</td>"
"<td class='value'>" (default-value-format (:value %)) "</td>"
"</tr>")))]
(str title-row (string/join data-rows) "</table>"))))}
function key_for_sum(arr) {
return arr.value; //value is the key
};
function sum(prev, next) {
return prev + next;
}
var totals_object = {};
totals_object.x = d[0]['x'];
totals_object.value = d.map(key_for_sum).reduce(sum);
totals_object.name = 'total';
totals_object.index = d[0]['index'];
totals_object.id = 'total';
d.push(totals_object);
var chart = c3.generate({
/*...*/
tooltip: {
format: {
/*...*/
},
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
function key_for_sum(arr) {
return arr.value; //value is the key
}
function sum(prev, next) {
return prev + next;
}
var totals_object = {};
totals_object.x = d[0]['x'];
totals_object.value = d.map(key_for_sum).reduce(sum);// sum func
totals_object.name = 'total';//total will be shown in tooltip
totals_object.index = d[0]['index'];
totals_object.id = 'total';//c3 will use this
d.push(totals_object);
var $$ = this,
config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) {
return name;
},
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value, name, bgcolor;
for (i = 0; i < d.length; i++) {
if (!(d[i] && (d[i].value || d[i].value === 0))) {
continue;
}
if (!text) {
title = titleFormat ? titleFormat(d[i].x) : d[i].x;
text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
}
name = nameFormat(d[i].name);
value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
text += "<td class='value'>" + value + "</td>";
text += "</tr>";
}
return text + "</table>";
}
}
+----------------+
| title |
+----------------+
| name | value |
+----------------+
tooltip: {
format: {
title(x, index) { return ''; },
name(name, ratio, id, index) { return lst[index + 1]; },
value(value, ratio, id, index) { return value; }
}
},
// internal = chart.internal()
const mousePos = d3.mouse(internal.svg.node()); // find mouse position
const clientX = mousePos[0]; //for x
const clientY = mousePos[1]; //for y
const tooltip = d3.select("#tooltip"); //select tooltip div (apply your style)
tooltip.style("display", "initial"); //show tooltip
tooltip.style("left", clientX - mouseOffSet.X + "px"); // set position
tooltip.style("top", clientY - mouseOffSet.Y + "px"); // set position
tooltip.html("<span>" + content + "</span>");
// you can arrange all content and style whatever you want