我使用dojo 1.8创建了一个简单的柱形图,我想在每个列的鼠标悬停上添加一个高亮效果。
Dojo的dojox图表API提供了一个名为Highlight的优秀类,您应该能够实例化注入图表实例和图名,如下所示......
new Highlight(ChartInstance, "plotName");
以下是支持此内容的文档:
http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html#highlight
http://dojotoolkit.org/api/1.8/dojox/charting/action2d/Highlight
http://dojotoolkit.org/documentation/tutorials/1.8/charting/
现在我已经遵循了这种语法,但还没有能够使效果起作用,并且在firebug中没有报告脚本错误。这是我的测试页......
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test chart</title>
<script>
var dojoConfig = {
baseUrl: "./",
async: true,
isDebug: true,
parseOnLoad: true,
gfxRenderer: "svg, canvas, silverlight",//svg is preferred chart renderer
//here are the packages dojo will be aware of and related js files
packages: [
//dojo specific packages
{name: "dojo", location: "libs/dojo"},
{name: "dojox", location: "libs/dojox"}
]
};
</script>
</head>
<body>
<!-- create the chart div-->
<div id="chartContent"></div>
<!-- load dojo and provide config via header script -->
<script src="libs/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dojo/domReady!"]);
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Columns",
"dojox/charting/axis2d/Default",
"dojox/charting/action2d/Highlight",
"dojo/domReady!"
],
function (Chart, Theme, ChartType, Default, Highlight){
chartData = [
{ x: 1, y: 19021 },
{ x: 2, y: 12837 },
{ x: 3, y: 12378 },
{ x: 4, y: 21882 },
{ x: 5, y: 17654 },
{ x: 6, y: 15833 },
{ x: 7, y: 16122 }
];
var chart = new Chart("chartContent", {title: "test bar chart"});
chart.setTheme(Theme);
chart.addPlot("barPlot", {type:ChartType, interpolate: false, tension: "S", markers: true, hAxis: "x", vAxis: "y"});
chart.addAxis("x", {title: "horizontal axis", titleOrientation: "away", min:0});
chart.addAxis("y", {title: "vertical axis", vertical: true});
chart.addSeries("bar series", chartData, {plot: "barPlot"});
new Highlight(chart, "barPlot");
chart.render();
}
);
</script>
</body>
</html>
要运行页面,您需要调整dojo和dojox位置以匹配您自己的设置,您也可以通过交换配置中每个的完整URL来指向它们的在线版本。
当您在浏览器中加载它时,您应该看到一个柱形图,并注意到突出显示实例对每列的鼠标悬停没有影响。
任何想法,也许我在这里错过了一些简单的东西?
答案 0 :(得分:2)
很久以后,但仍然,这就是我的想法:
突出显示无法使用GRADIENTS作为填充。 我假设这是因为Highlight将检查使用的是什么颜色,如果更轻,那么50%,使用更浅的颜色...当主题包含渐变时,它返回两个值并且它会中断。
我在使用带渐变的自定义主题时遇到同样的问题,删除渐变并使用纯色解决了问题。
所以任何带渐变的主题都不会支持精彩集锦。
答案 1 :(得分:1)
好的,我现在已经发现了这个问题,说实话真是太烦人了!
这与Claro主题有关,我将其改为其中一个,在这种情况下我使用了MiamiNice主题,你会相信吗,鼠标移动现在可以工作!!!!
感兴趣的代码段:
require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice", <-- here it used to end /Claro
我会把它放在dojo社区论坛上。