1

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 を交換することで、それらのオンライン バージョンを指定することもできます。

ブラウザーにロードすると、縦棒グラフが表示され、強調表示インスタンスが各縦棒のマウスオーバーに影響を与えていないことがわかります。

何かアイデアはありますか、おそらくここで簡単なことを見逃していますか?

4

2 に答える 2

1

さて、私は問題を発見しました。正直に言うと、かなり面倒でした!

それはすべてClaroテーマに関係していました。これを他のテーマの1つに変更しました。この場合、MiamiNiceテーマを使用しました。信じられますか、マウスオーバーが機能するようになりました!!!!

興味のある方のためのコード スニペット:

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

これを Dojo コミュニティ フォーラムに投稿します。

于 2012-10-26T10:49:53.760 に答える