不工作DojoX中图高亮效果(dojox chart highlight effect not wo

2019-10-17 08:44发布

我创建使用Dojo 1.8版简单的柱形图,我想在鼠标悬停时增加为每列一个突出效果。

Dojo的DojoX中的图表API提供了一个很好的类称为亮点,你应该能够实例注入图表实例,如下面的图表名称...

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/

现在,我已经按照这个语法,但还没有能够得到效果的工作,并在萤火虫被报道没有脚本错误。 这里是我的测试页...

<!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交换为每个在配置指向它们的在线版本。

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

任何想法,也许我错过了简单的东西在这里?

Answer 1:

很多后,不过,这里是我想通:

亮点是不与渐变填充作为工作 。 我假设这源于一个事实,即重点将是检查使用什么颜色的,如果再轻50%,使用颜色较浅......当主题包括梯度,它返回两个值和它打破。

我就同一问题蹒跚而使用自定义的主题,渐变,去掉渐变和使用纯色解决了这个问题。

因此,有梯度的任何主题是不会支持高亮显示。



Answer 2:

好吧,我现在已经发现了这个问题,这是相当恼人的是诚实的!

这是所有做的Claro的主题,我改变了这种别人的一个,在这种情况下,我使用的MiamiNice主题,你会相信吗,在鼠标悬停现在的工作!!!!

代码片段对于那些有兴趣:

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

我把这个道场社区论坛。



文章来源: dojox chart highlight effect not working