Question

我一直在尝试在用户使用Firefox附加程序加载的页面上呈现ChartJS图表。我正在使用附加SDK将PageMod插入到每个页面：

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

在我的onPageLoad.js中，我使用jQuery插入一个HTML5 canvas元素，然后尝试在其上绘制我的图形：

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 元素展开），但不会渲染图形。因此，我知道库确实正在加载。我在SO上找到的最接近的问题是ChartJS is not rendered，但这实际上是一个完全不同的问题。我可以在画布上画一个矩形：

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

因此，如果它不是画布本身的问题，为什么这个ChartJS图不能渲染？

Answer 1

jquery./js,chart.js和onpageload.js文件是否位于数据文件夹中？如果这不是问题，那么问题可能是跨域事情，所以你必须通过设置内容脚本策略来解决：How to add Content Security Policy to Firefox extension

Mozilla插件sdk chartjs无法渲染

1 个答案: