javascript - Chartjs 不渲染图表并且没有抛出错误

Question

canvas 标签从 new Chart(...) 初始化中获取宽度和高度，但图表实际上并未渲染。我不确定这里出了什么问题，因为也没有抛出任何错误。

const documentStats = document.getElementById('document_stats').getContext('2d');

const statsArr = {
  commentary: 0,
  variants: 0
};

const chartData = {
  labels: [],
  datasets: [{
    data: [],
    borderWidth: 5,
    backgroundColor: ['#2098d4', '#f8da50'],
    hoverBackgroundColor: ['#148fb5', '#f2d02b'],
  }],
};

chartData.labels = Object.keys(statsArr);
// for charts data
chartData.datasets[0].data = Object.values(statsArr);

// And for a doughnut chart
new Chart(documentStats, {
  type: 'doughnut',
  data: chartData,
  maintainAspectRatio: false,
  responsive: true,
  options: {
    legend: {
      display: false,
      position: 'left'
    },
  },
});

请访问Fiddle link对于功能示例。

Answer 1

问题是，您正在使用 ChartJS v1，但正在构建 ChartJS v2 的图表。

您应该使用最新版本的 ChartJS，即 ChartJS v2。这是CDN Link为了它。

这里是您代码的工作版本...

const documentStats = document.getElementById('document_stats').getContext('2d');
const statsArr = {
   commentary: 0,
   variants: 0
};
const chartData = {
   labels: [],
   datasets: [{
      data: [],
      borderWidth: 5,
      backgroundColor: ['#2098d4', '#f8da50'],
      hoverBackgroundColor: ['#148fb5', '#f2d02b'],
   }],
};

const result = {
   "id": "13",
   "doc_name": "Confidentiality Agreement - (Non-Disclosure Agreement)",
   "short_name": "Comprehensive One-Directional",
   "long_description": "This agreement is intended to be used by a business when providing confidential information in one direction from the business to the recipient party. This agreement is comprehensive and includes various protections for the party disclosing the confidential information. This agreement can be used in various contexts eg. hiring a contract worker, or providing confidential information for a limited scope project.",
   "overview": {
      "name": "NDA",
      "summary": "An NDA is a non-disclosure agreement, also known as a confidentiality agreement. The person receiving confidential information agrees not to share that information with others and not to use the information except as authorized by the person disclosing the information.",
      "usage": "This document could be used in any situation where confidential information is shared, including employment/consulting relationships, potential investors, potential business relationships, potential mergers and acquisitions, potential manufacturers of a product etc.",
      "who_signs": "Both the person receiving the information (‘receiving party’) and the person disclosing the information (‘disclosing party’) will sign the NDA. Sometimes certain affiliates or representatives of the receiving and disclosing parties will also be required to sign the NDA.",
      "description": "Non-disclosure clauses can range in length from a clause contained in an agreement (eg. an employment agreement), to a lengthy and detailed stand-alone contract.\n\n                    The NDA must contain a general duty to not disclose the confidential information and a prohibition of use of the confidential information except for the purpose permitted in the NDA. The confidential information and the permitted purpose must be defined, and should be appropriate to the unique needs of the situation. The NDA should also include a list of exclusions from the obligation not to disclose, as well as a description of persons to whom the receiving party can disclose the information eg. authorized representatives.\n\n                    Many NDA’s contain further restrictive covenants designed to protect the disclosing party. These may include a non-competition clause, a non-solicitation clause, a non-circumvention clause or an expanded non-use clause.",
      "core_elements": "The core elements include: definition of confidential information, general duty not to disclose, confidential information exclusions, use limited to purpose, definition of use or purpose, authorized representatives, term, termination, remedies, return or destruction of confidential information.\n\n                    Some additional clauses include handling of confidential information and safeguarding requirements, ownership of confidential information and its derivatives, no representation as to accuracy of confidential information, confidentiality of agreement itself, injunctive relief, liability for actions of representatives, IP assignment and transfer of moral rights, no conflict with another agreement, non-competition, non-solicitation, non-circumvention, non-use, no obligation to enter into a business relationship.",
      "related_documents": ""
   },
   "status": [{
      "label": "commentary",
      "count": "127"
   }, {
      "label": "variants",
      "count": "256"
   }]
};

// TODO: Add permissions later. Hide from view later.
result.status.filter((v, i) => { //debugger;
   statsArr[v.label] = v.count;
   $(`.${result.status[i].label.toLowerCase()}_stats span`).text(result.status[i].count);
});

// for Chart legend
chartData.labels = Object.keys(statsArr);
// for charts data
chartData.datasets[0].data = Object.values(statsArr);

// And for a doughnut chart
new Chart(documentStats, {
   type: 'doughnut',
   data: chartData,
   maintainAspectRatio: false,
   responsive: true,
   options: {
      legend: {
         display: false,
         position: 'left'
      },
   },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas width="200" height="200" id="document_stats"></canvas>