dojox chart highlight effect not working

I've created a simple column chart using dojo version 1.8 and I want to add a highlight effect on mouseover for each column.

Dojo's dojox charting API provides a nice class called Highlight that you should be able to instantiate injecting a chart instance and a plot name as below...

new Highlight(ChartInstance, "plotName");

Here is the docs to support this:

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/

Now I've followed this syntax but havent been able to get the effect to work, and no scripting errors are being reported in firebug. here is my test page...

<!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>

To run the page you'll need to adjust the dojo and dojox locations to match your own set up, you can also just point to the online versions of them by swapping in the full URL for each in the config.

When you load it in the browser, you should see a column chart, and notice that the highlight instance has had no effect on the mouseover for each column.

Any ideas, perhaps I've missed something simple here?

回答1:

A lot later, but still, here is what I figured:

Highlight is not working with GRADIENTS as fills. I'm assuming this comes from the fact that Highlight will be checking what colors are used, and if lighter then 50%, uses the lighter color... When the theme includes a gradient, it returns two values and it breaks.

I stumble on the same issue while using a custom theme with gradients, removing the gradients and using solid colors solved the problem.

So any theme with a gradient is not going to support Highlight.

回答2:

Ok I've now discovered the problem, and it was fairly annoying to be honest!

it was all to do with the Claro theme, I changed this to one of the others, in this case I used the MiamiNice theme, and would you believe it, the mouseovers now work!!!!

Code snippet for those that are interested:

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

I'll put this on the dojo community forum.