2014-09-03 3 views
0

사용자가 Firefox 부가 기능으로로드하는 페이지에서 ChartJS 그래프를 렌더링하려고 시도했습니다. 거기에 내 그래프를 그릴 시도하십시오Mozilla addon sdk chartjs가 렌더링되지 않습니다.

내 onPageLoad.js에서
pageMod.PageMod({ 
    include: "*", 
    contentScriptFile: [data.url("jquery.js"), 
    data.url("Chart.js"), 
    data.url("onPageLoad.js")] 
}); 

, 내가 jQuery를 사용하여 HTML5 캔버스 요소를 삽입 : 나는 모든 페이지에 PageMod을 삽입하는 부가 기능 SDK를 사용하고

var chartData = [{value:100,color:'#4C86B9',highlight:'#508CC2',label:'Blue Team'},{value:150,color:'#B9525C',highlight:'#C25660',label:'Red Team'}]; 

$(document).ready(function() { 
    var ctx = document.getElementById("chart-area").getContext("2d"); 
    var myPieChart = new Chart(ctx).Pie(chartData, {responsive:true}); 
}); 

이는 (내가 부모 DIV 확대 요소를 볼 수 있습니다) 지역에 확대 캔버스 원인이 있지만 그래프는 렌더링되지 않습니다. 따라서, 저는 도서관이 정말로로드되고 있다는 것을 알고 있습니다. 내가 찾을 수있는 가장 가까운 질문은 ChartJS is not rendered이지만 실제로는 완전히 다른 문제입니다. 내가 하찮게 내 캔버스에 사각형을 그릴 수 있습니다 :

ctx.fillRect(10,20,200,100); 

을 따라서는 캔버스 자체에 문제가 아니라면, 왜 ChartJS가 렌더링되지 않는 그래프이다?

+0

'준비'기능이 호출되었는지 확인 했습니까? – paa

+0

테스트 용 캔버스에 사각형을 그릴 수 있기 때문에 ready 함수가 호출되었음을 알고 있습니다. console.log를 통해 chartData가 올바르게 설정되었는지 확인할 수도 있습니다. 캔버스가 원하는 차트 크기로 크기가 조정 된 것처럼 보이지만 실제 그래프는 렌더링되지 않습니다. – user2036364

답변

0

데이터 폴더에 jquery./js, chart.js 및 onpageload.js 파일이 있습니까? 문제가 아닌 경우 문제는 도메인 간 문제 일 수 있으므로 콘텐츠 스크립트 정책을 설정하여 해결해야합니다. How to add Content Security Policy to Firefox extension

+0

죄송합니다. 지정하지 않았습니다. 모든 자바 스크립트 파일은 실제로 내 데이터 폴더에 있으며 잘로드되어 있다는 것을 알고 있습니다. chart.js가 데이터 폴더에 있으므로 (즉, 로컬로로드하고 있기 때문에) 크로스 도메인 정책이 필요하지 않습니다. – user2036364

+0

아마도 그 파일들이 그물에있는 몇몇 파일에 의존하여 아마도 필요할지도 모른다고 생각했습니다. 그래서 어떤 클라우드 파일에도 의존성이 없습니까? – Noitidart

+0

ChartJS 문서 (http://www.chartjs.org/docs/)에 따르면 jQuery와 같은 다른 종속성이 아닌 chart.js 파일 만 포함하면됩니다. 나는 심지어 chart.js 소스 코드를 검색해 수입품 흔적을 발견하지 못 했으므로 어떤 종속성도 없다고 생각한다. – user2036364

관련 문제