2012-10-26 1 views
1

dojo 버전 1.8을 사용하여 간단한 세로 막 대형 차트를 작성했으며 각 열에 마우스 오버시 강조 효과를 추가하고 싶습니다. 여기 Dojo의 DojoX는 차트 API를 사용하면 차트의 예를 아래와 같이 플롯 이름을 주입 인스턴스화 할 수 있어야합니다 강조라는 좋은 클래스를 제공 dojox 차트 강조 효과가 작동하지 않습니다.

...

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> 

당신이 당신의 자신의 세트를 일치하도록 도장 및 DojoX는 위치를 조정해야 페이지를 실행하려면, 당신은 또한 단지 교환에 의해 그들의 온라인 버전을 가리킬 수있다 구성의 각 URL에 대한 전체 URL

브라우저에서로드 할 때 세로 막 대형 차트가 나타나야하며 강조 인스턴스가 각 열의 마우스 오버에 아무런 영향을 미치지 않았 음을 알 수 있습니다.

어떤 아이디어가 있습니까? 아마도 여기에서 간단한 것을 놓친 것입니까?

+0

동일한 문제가있어 강조 표시 효과가 claro 테마에서 작동하지 않습니다. –

답변

1

좋아요. 이제 문제를 발견했습니다. 솔직히 말해서 매우 귀찮습니다.

IT는 그래, 맞아 테마와 함께 할 모든이, 나는 내가 MiamiNice 테마를 사용하는이 경우, 다른 사람의 일이 변경, 그리고 당신은의 마우스 오버 지금 일을 믿는 것입니다 !!!! 관심있는 것들에 대한

코드는 :

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

나는 도장 커뮤니티 포럼에 넣을 수 있습니다.

2

은 많은 후,하지만 여전히, 여기에 내가 생각 것입니다 :을 채 웁니다로

강조 그라디언트 작동하지 않습니다. 하이라이트는 어떤 색상이 사용되는지를 확인하고 밝은 색상을 사용하면 50 %를 사용하는 밝은 색상을 사용한다고 가정합니다. 테마에 그라디언트가 포함되어 있으면 두 개의 값이 반환되어 중단됩니다.

그래디언트를 제거하고 단색을 사용하여 사용자 지정 테마를 사용하는 동안 문제가 발생하여 문제가 해결되었습니다.

그라데이션이있는 테마는 하이라이트를 지원하지 않습니다.

관련 문제