Question

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了解功能示例。

Answer 1

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

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

以及的代码的工作版本......

<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>

{{1}}

Chartjs没有渲染图表而且没有抛出错误

1 个答案: