Dojox图表突出显示效果不起作用

我已经使用Dojo版本1.8创建了一个简单的列图，我想为每列添加一个突出显示的效果。

Dojo的Dojox Charting API提供了一个不错的类，称为突出显示，您应该能够实例化注入图表实例和绘图名称，如下...

new Highlight(ChartInstance, "plotName");

这是支持这一点的文档：

http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html#highlight

http://dojotoolkit.org/api/1.8/dojox/charting/acharting/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>

要运行页面P>

将其加载到浏览器中时，您应该看到一个列图，并注意突出显示实例对每列没有影响。

有什么想法，也许我在这里错过了一些简单的东西？

很多之后，但这仍然是我想的：

突出显示不适用于填充。我假设这是从高光将检查使用了哪种颜色的事实，如果较轻的50％使用较轻的颜色...当主题包含梯度时，它会返回两个值并破裂。p>我在使用带有梯度的自定义主题时偶然发现了同一问题，删除梯度并使用纯色解决了问题。

因此，任何具有梯度的主题都不会支持突出显示。

好吧，我现在发现了这个问题，老实说这很烦人！

这与Claro主题有关，我将其更改为其他一个，在这种情况下，我使用了Miaminice主题，并且您相信，Mouseovers现在正常工作！！！

！

代码片段适用于感兴趣的人：

require([
    "dojox/charting/Chart",
    "dojox/charting/themes/MiamiNice", <-- here it used to end /Claro

我将把它放在Dojo社区论坛上。

相关内容

最新更新

热门标签：