【发布时间】：2014-04-30 23:06:06
【问题描述】：
我有一些图表代码，而我将 MouseIndicator 添加到折线图。我希望 MouseIndicator 上的文本为 HTML，但我不确定这是否可行，因为它不起作用。我添加了一个 labelFunc 来返回我想要的 HTML，但它只显示为纯文本。
我在JSFiddle（及以下）上获得了代码，因此您可以尝试一下。
感谢任何帮助。
require(["dojox/charting/Chart",
"dojox/charting/action2d/Magnify",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/Legend",
"dojox/charting/themes/PlotKit/green",
"dojox/charting/plot2d/StackedLines",
"dojox/charting/action2d/MouseIndicator",
"dojox/charting/axis2d/Default",
"dojo/ready"
], function(Chart, Magnify, Highlight, Tooltip, Legend, theme_green, _lines, MouseIndicator, _axis, ready) {
// wrapped in domready event
ready(function() {
// create a chart with placeholder div#charty
var chart2 = new Chart("chart");
chart2.setTheme(theme_green);
chart2.addPlot("default", {
type: "StackedLines",
markers: true,
// create round dots on plot-points
tension: 3,
// curve slightly
shadows: { // add shadow
dx: 2,
dy: 2,
dw: 2
}
});
chart2.addAxis("x", {
min: 0,
majorTick: {
stroke: "black",
length: 3
},
minorTick: {
stroke: "gray",
length: 3
}
});
chart2.addAxis("y", {
vertical: true,
min: 0,
max: 6,
majorTick: {
stroke: "black",
length: 3
},
minorTick: {
stroke: "gray",
length: 3
}
});
// each point, added to a series.
// note the first entry in Series A which has the
// customizable object notation
// Hover mouse over lower left point (first red square"
chart2.addSeries("Series A", [{
x: 0.5,
y: 3.5,
tooltip: "Custom data"}
, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {
stroke: {
color: "red",
width: 2
},
fill: "lightpink",
marker: "m-3,-3 l0,6 6,0 0,-6 z"
});
chart2.addSeries("Series B", [1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1], {
stroke: {
color: "blue",
width: 2
},
fill: "lightblue",
marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
});
chart2.addSeries("Series C", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {
stroke: {
color: "green",
width: 2
},
fill: "lightgreen",
marker: "m0,-3 l3,3 -3,3 -3,-3 z"
});
var anim2a = new Magnify(chart2, "default", {
scale: 3
});
var anim2b = new Highlight(chart2, "default");
var anim2c = new Tooltip(chart2, "default");
var legend2 = new Legend({
chart: chart2
}, "legend2");
new dojox.charting.action2d.MouseIndicator(chart2, "default", {
series : "Series A",
mouseOver: true,
labelFunc: function(v, v2){
return "<div>fred</br></br>betty</div>";
},
fillFunc: function(v){
return '#fcfcfc';
},
fontColor:'black',
stroke: {width: 2, color: 'purple'},
lineStroke: {width: 2, color: 'green'},
dualIndicator: true
});
chart2.render();
});
});
【问题讨论】：
标签： dojo dojox.charting