javascript - 如何将 chart.js 图表保存在一个 JS 文件中，并且当 JS 文件中的 ID 在一个特定的 html 页面上不存在时不会出现错误？

标签 javascript jquery html web chart.js

我对 JS 很陌生，对 Chart.js 和多个图表有疑问。

  • 我从 CDN 加载所有库，例如 jquery 和 chart.js
  • 然后我有一个用于本地加载插件的 plugins.js
  • 还有一个名为 main.js 的 js，其中包含所有自定义 JS。

我收到这个错误:

Uncaught TypeError: Cannot read property 'style' of undefined

我的问题是:

如何将所有 Chart.js 图表保存在一个 .js 文件中，该文件加载到所有网站页面上，但并非所有页面都包含所有图表。

(我有一个包含多个页面和不同图表的网站，我认为在一个 JS 文件中一次加载所有内容会更聪明)

也感谢任何其他指针。 :)

-

关于代码

我发布了下面的代码并创建了一个 JSFiddle:https://jsfiddle.net/NoLooseEnds/1pt3m41a/

在 main.js 中，我所有的 Chart.js 数据都是这样的(除其他外):

// *************************************
// Chart.js
// *************************************

// Global Settings
Chart.defaults.global.defaultFontColor = "rgba(43,43,43,1)";
Chart.defaults.global.defaultFontFamily = "'ApexNew-Medium', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.defaultFontStyle = "normal";
Chart.defaults.global.maintainAspectRatio = false;
// Disable click on legend
Chart.defaults.global.legend.onClick = (e) => e.stopPropagation();

// Bar Charts settings
var barChart__options = {
};

// Doughnut settings
var dnutChart__options = {
  legend: {
    position: "bottom",
    // Disable click on legend
    onClick: (e) => e.stopPropagation()
  }
};

// *************************************
// Datasets
// *************************************

// Bar Chart X
var barChartX__data = {
  labels: ["Alpha", "Bravo", "Charlie"],
  datasets: [
    {
        label: "2015",
        borderWidth: 0,
        backgroundColor: "rgba(43,43,43,1)",
        data: [410,430,110]
    },
    {
        label: "2016",
        borderWidth: 0,
        backgroundColor: "rgba(233,131,0,1.0)",
        data: [405,360,150]
    }
  ]
};

const barChartX = $("#barChartX");
let ChartX = new Chart(barChartX, {
  type: "bar",
  data: barChartX__data,
  options: barChart__options
});

// Doughnut Chart Y
var dnutChartY__data = {
  labels: ["Alpha", "Bravo"],
  datasets: [
    {
      label: "Points",
      borderWidth: 0,
      backgroundColor: ["rgba(43,43,43,1)", "rgba(233,131,0,1.0)"],
      data: [90,270]
    }
  ]
};

const dnutChartY = $("#dnutChartY");
let ChartY = new Chart(dnutChartY, {
  type: "doughnut",
  data: dnutChartY__data,
  options: dnutChart__options
});



// Doughnut Chart Z
var dnutChartZ__data = {
  labels: ["Alpha", "Bravo", "Charlie"],
  datasets: [
    {
      label: "Points",
      borderWidth: 0,
      backgroundColor: ["rgba(233,131,0,1.0)","rgba(239,162,64,1.0)","rgba(244,193,127,1.0)"],
      data: [405,360,150]
    }
  ]
};

const dnutChartZ = $("#dnutChartZ");
let ChartZ = new Chart(dnutChartZ, {
  type: "doughnut",
  data: dnutChartZ__data,
  options: dnutChart__options
});

我的 HTML 是这样的:

<div class="example__chart">
  <div>
    <canvas id="barChartX" height="400" width="400"></canvas>
  </div>
<!--  
  <div>
    <canvas id="dnutChartY" height="400" width="400"></canvas>
  </div> 
-->
  <div>
    <canvas id="dnutChartZ" height="400" width="400"></canvas>
  </div>
</div>

如您所见，我已经注释掉了触发错误的部分。

最佳答案

您可以创建一个辅助函数并检查是否存在 barChartX、dnutChartY、dnutChartZ 或任何其他 DOM 元素的 DOM 元素，例如这个:

var doChart = function(o, d) {
    if (typeof(o) != 'undefined' && o.length > 0) {
        return new Chart(o, d);
    } else {
        return null;
    }
}

那么你的 Chart.js 代码将是这样的

// *************************************
// Chart.js
// *************************************
// Global Settings
Chart.defaults.global.defaultFontColor = "rgba(43,43,43,1)";
Chart.defaults.global.defaultFontFamily = "'ApexNew-Medium', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.defaultFontStyle = "normal";
Chart.defaults.global.maintainAspectRatio = false;
// Disable click on legend
Chart.defaults.global.legend.onClick = (e) => e.stopPropagation();


var doChart = function(o, d) {
    if (typeof(o) != 'undefined' && o.length > 0) {
        return new Chart(o, d);
    } else {
        return null;
    }
}

// Bar Charts settings
var barChart__options = {};

// Doughnut settings
var dnutChart__options = {
    legend: {
        position: "bottom",
        // Disable click on legend
        onClick: (e) => e.stopPropagation()
    }
};

// *************************************
// Datasets
// *************************************

// Bar Chart X
var barChartX__data = {
    labels: ["Alpha", "Bravo", "Charlie"],
    datasets: [{
            label: "2015",
            borderWidth: 0,
            backgroundColor: "rgba(43,43,43,1)",
            data: [410, 430, 110]
        },
        {
            label: "2016",
            borderWidth: 0,
            backgroundColor: "rgba(233,131,0,1.0)",
            data: [405, 360, 150]
        }
    ]
};

const barChartX = $("#barChartX");
/*let ChartX = new Chart(barChartX, {
  type: "bar",
  data: barChartX__data,
  options: barChart__options
});*/

let ChartX = doChart(barChartX, {
    type: "bar",
    data: barChartX__data,
    options: barChart__options
});

// Doughnut Chart Y
var dnutChartY__data = {
    labels: ["Alpha", "Bravo"],
    datasets: [{
        label: "Points",
        borderWidth: 0,
        backgroundColor: ["rgba(43,43,43,1)", "rgba(233,131,0,1.0)"],
        data: [90, 270]
    }]
};

const dnutChartY = $("#dnutChartY");
let ChartY = doChart(dnutChartY, {
    type: "doughnut",
    data: dnutChartY__data,
    options: dnutChart__options
});

// Doughnut Chart Z
var dnutChartZ__data = {
    labels: ["Alpha", "Bravo", "Charlie"],
    datasets: [{
        label: "Points",
        borderWidth: 0,
        backgroundColor: ["rgba(233,131,0,1.0)", "rgba(239,162,64,1.0)", "rgba(244,193,127,1.0)"],
        data: [405, 360, 150]
    }]
};

const dnutChartZ = $("#dnutChartZ");
let ChartZ = doChart(dnutChartZ, {
    type: "doughnut",
    data: dnutChartZ__data,
    options: dnutChart__options
});

请检查我的工作示例，这里没有 javascript 错误:http://zikro.gr/dbg/html/chartsjs/

更新

请在这里查看 JSFiddle 示例:https://jsfiddle.net/h1dafqjx/2/

更新 2

问题分析及解决方案

您面临的问题是，您希望在一个 javascript 文件中有多个声明和图表设置，您将在许多位置使用这些位置，这可能会发生，其中一些位置没有一些已声明的元素，因此您希望您的代码能够处理这些情况。

你像这样声明一个图表:

const barChartX = $("#barChartX");
let ChartX = new Chart(barChartX, {
  type: "bar",
  data: barChartX__data,
  options: barChart__options
});

为了处理丢失的 DOM 元素，例如当 $("#barChartX") 不存在时，您需要创建一个条件来检查这些情况。

例如:

const barChartX = $("#barChartX");
if(typeof(barChartX) != 'undefined' && barChartX.length > 0) {
    let ChartX = new Chart(barChartX, {
      type: "bar",
      data: barChartX__data,
      options: barChart__options
    });
}

使用上面的代码，您可以检查 barChartX 是否已定义，以及它是否实际包含具有 barChartX.length > 0 条件的任何元素。 现在，为了不重复事情，我们保持简单并在函数中完成所有检查。因此我们创建函数 doChart 如下:

var doChart = function(o, d) {
    if (typeof(o) != 'undefined' && o.length > 0) {
        return new Chart(o, d);
    } else {
        return null;
    }
}

第一个参数o是我们要检查的DOM元素，第二个参数d是图表对象属性。

例如:

let ChartX = doChart(barChartX, {
  type: "bar",
  data: barChartX__data,
  options: barChart__options
});

这里我们将元素的 barChartX jQuery 对象传递给 doChart 函数，以便该函数检查是否存在。然后我们通过名为 d 的第二个参数传递图表对象参数，这是用于创建新图表的图表对象属性:

{
  type: "bar",
  data: barChartX__data,
  options: barChart__options
}

关于javascript - 如何将 chart.js 图表保存在一个 JS 文件中，并且当 JS 文件中的 ID 在一个特定的 html 页面上不存在时不会出现错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41612975/

上一篇：jquery - 如何在更改功能上进行jQuery多重选择，获取未选择的项目数？

下一篇：php - mpdf 列宽未固定并随数据增加

相关文章：

javascript - 默认在 angularjs 中的选择下拉列表中显示最后位置的占位符

jquery - 并且 jQuery 的条件不起作用

选择选项后，Javascript/Jquery 更改 Select 类

javascript - 如何重置 ace 主题上的滚动条？

javascript - 当前使用 Facebook Javascript SDK 抓取用户图片的方法是什么 - 最佳快捷方式？

javascript - jQuery:追加到文本区域内段落的 html 的最佳方式

javascript - 我如何找出导致页面不允许突出显示文本或右键单击的脚本？

javascript - 卡住列垂直滚动问题

jquery - 悬停在禁用的输入字段上不起作用？

javascript - Ace Editor - 删除特定语法的错误

©2024 IT工具网  联系我们