gpt4 book ai didi

javascript - dojox 图表突出显示效果不起作用

转载 作者:行者123 更新时间:2023-11-30 13:13:13 25 4
gpt4 key购买 nike

我使用 dojo 1.8 版创建了一个简单的柱形图,我想为每一列添加鼠标悬停时的突出显示效果。

Dojo 的 dojox 图表 API 提供了一个名为 Highlight 的类,您应该能够实例化注入(inject)图表实例和绘图名称,如下所示...

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 来指向它们的在线版本。

当您在浏览器中加载它时,您应该会看到一个柱形图,并注意到突出显示实例对每列的鼠标悬停没有影响。

任何想法,也许我在这里错过了一些简单的事情?

最佳答案

很久以后,但我仍然认为:

高光无法使用渐变作为填充。我假设这是因为 Highlight 将检查使用的颜色,如果比 50% 更亮,则使用较浅的颜色......当主题包含渐变时,它会返回两个值并中断。

我在使用带有渐变的自定义主题时遇到了同样的问题,删除渐变并使用纯色解决了这个问题。

所以任何带有渐变的主题都不会支持高亮显示。

关于javascript - dojox 图表突出显示效果不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13085203/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com