dojox.charting.Chart SVG 표면 문제

도장 차트를 선호하는 PNG 이미지 형식으로 내 보내야합니다. 불행한 점은 내장 기능이 없지만이를 해결할 수있는 방법을 찾았습니다. dojo 차트는 SVG 그래픽을 기반으로합니다 :dojox.charting.Chart SVG 표면 문제

차트가 렌더링 된 후 SVG 문자열을 먼저 가져온 다음이 문자열을 ajax를 통해 서버로 보낸 다음 ImageMagick PHP 라이브러리를 사용하여 PNG로 변환합니다. 이제 전체 프로세스가 제대로 작동하지만 문제가 있습니다.

SVG 문자열은 전체적으로 세부 정보를 포함하지 않으며, 차트 제목과 축 값 및 마커는 SVG 문자열에 없습니다. 가능한 문제?

다음은 dojo Chart의 추출 된 SVG 문자열을 다른 div에 다시 인쇄 한 코드입니다. 시각적으로 차이를 확인할 수 있습니다.

var mychart; 

require(["dojo/ready", "dojox/charting/Chart2D", "dojox/gfx/utils", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight", "dojox/charting/themes/Claro"], function (ready, Chart, Utils, Tooltip, Highlight, ClaroTheme) { 
    ready(function() { 
    mychart = Chart("mychart"); 
    mychart.title = "My Chart"; 

    mychart.addPlot("column_plot", { 
     type: "Columns", 
     lines: true, 
     areas: false, 
     markers: true 
    }); 

    var column_tooltip = new Tooltip(mychart, "column_plot"); 
    var column_highlight = new Highlight(mychart, "column_plot"); 

    mychart.addAxis("x", {vertical: false}); 
    mychart.addAxis("y", {vertical: true}); 

    mychart.addSeries("column_series", [1, 3, 5, 2, 6, 1, 0, 4, 6, 4, 1], { 
     plot: "column_plot" 
    }); 

    mychart.setTheme(ClaroTheme); 
    mychart.render(); 

    //this function will be called after render to send SVG to server via AJAX 
    document.getElementById("syncbutton").onclick = function (e) { 
     var svgString = Utils.toSvg(mychart.surface).results[0]; 
     document.getElementById("svgchart").innerHTML = svgString;  
    }; 

    }); 
});

http://jsfiddle.net/HAfSd/7/

출처

2013-05-08 asim-ishaq

기본적으로 레이블은 HTML 마크 업을 사용하여 그려, 그래서 그들은 GFX 장면의 일부가 아니다. 이것이 그들이 생성 된 svg 출력에없는 이유입니다. htmlLabels : false 축 속성을 사용하여 HTML 레이블 렌더링을 명시 적으로 해제해야합니다. 이 구성에서는

chart.addAxis("x", { 
      type : "Default", 
      fixLower: "minor", 
      natural: true, 
      enableCache: true, 
      htmlLabels: false, 
      majorTick: {color: "red", length: 4}, 
      minorTick: {color: "blue", length: 2} 
    });

이 라벨은 기본 GFX 렌더러 (SVG, 캔버스 등)로 렌더링하고 SVG 출력 될 것이다.

출처

2013-05-08 20:19:02

어디서이 옵션을 지정해야합니까? 코드 스 니펫을 통해 설명 할 수 있습니까? –

내 대답을 편집하여 코드 스 니펫을 추가했습니다. –

확인. 축에 감사드립니다. 그러나 제목은 여전히 SVG 문자열에 없습니다. http://jsfiddle.net/HAfSd/10/ –

dojox.charting.Chart SVG 표면 문제

답변

관련 문제