javascript - Chartjs不呈现图表并且没有引发错误

canvas标签从新的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以获取功能示例。

最佳答案

问题是，您使用的是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>

关于javascript - Chartjs不呈现图表并且没有引发错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44810972/

chartjs

javascript - Chartjs不呈现图表并且没有引发错误