Charts.js饼图

Question

我无法在此Bootstrap Admin主题中加载饼图（右上角）。

在我添加信息“面板”或任何其他非chart.js面板之前，它确实加载正常，然后它将不再加载。

我上传了以下链接中的文件，但也包含在下面的页面html中。

http://econics.liift.io/Admin/charts-chartjs.html

$(selector).on('click', function (){
   //your code here
});

Answer 1

检查检查员。你会发现你在图表 - chartjs.js的line 293上抛出错误。

[Error] TypeError: null is not an object (evaluating 'document.getElementById("bar-chartjs").getContext')

饼图的代码在此之后出现，因此饼图代码不会运行。

编辑 - 添加用于检查元素是否存在的代码。 如果元素不存在，getElementById会返回null。因此，您可以在简单的if语句中包装图表的创建：

var bar = document.getElementById("bar-chartjs");
var ctxBar;
if (bar) {
    ctxBar = bar.getContext("2d");
    myBar = new Chart(ctxBar).Bar(barChartData, {
        responsive : true,
        scaleShowGridLines : true,
        scaleGridLineColor : "#bfbfbf",
        scaleGridLineWidth : 0.2,
        //bar options
        barShowStroke : true,
        barStrokeWidth : 2,
        barValueSpacing : 5,
        barDatasetSpacing : 2,
        //animations
        animation: true,
        animationSteps: 60,
        animationEasing: "easeOutQuart",
        //scale
        showScale: true,
        scaleFontFamily: "'Roboto'",
        scaleFontSize: 13,
        scaleFontStyle: "normal",
        scaleFontColor: "#333",
        scaleBeginAtZero : true,
        //tooltips
        showTooltips: true,
        tooltipFillColor: "#344154",
        tooltipFontFamily: "'Roboto'",
        tooltipFontSize: 13,
        tooltipFontColor: "#fff",
        tooltipYPadding: 8,
        tooltipXPadding: 10,
        tooltipCornerRadius: 2,
        tooltipTitleFontFamily: "'Roboto'",
    });
}