Question

我是图表JS的新手，试图在angular 4应用程序中实现。即使代码表中没有错误也没有出现在浏览器中。我参考了很多文档和在线材料来实施chart.i已经花了将近3天的时间来查明原因，请帮助我纠正同样的问题谢谢

Here is my code 
dependencies:

“ chart.js”：“ ^ 2.7.3”

在cli.json文件中

“ ../ node_modules / chart.js / dist / Chart.js”，

在组件中

从“ chart.js”导入{Chart}；

ngOnInit() {
    const el = <HTMLCanvasElement> document.getElementById('myChart');
    const ctx = el.getContext('2d');

    console.log(el);
    console.log(ctx);

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });

}

以html

 <canvas id="myChart" width="400" height="400"></canvas>

我在浏览器中没有任何错误，并且能够同时打印本机元素和上下文以及Chart对象。不确定为什么图表未出现在浏览器中。请帮助

nativeEliment on console giving-
<canvas _ngcontent-c1="" height="0" id="myChart" width="0" class="chartjs-render-monitor" style="display: block; height: 0px; width: 0px;"></canvas>

context on console:
CanvasRenderingContext2D {canvas: canvas#myChart, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}

chart object on console.log-Chart {id: 0, ctx: CanvasRenderingContext2D, canvas: canvas#myChart.chartjs-render-monitor, config: {…}, width: 0, …}

Answer 1

我知道该线程有些过时了，但是为了节省我在此问题上花费的其他神经，我将提供此信息：

画布（- now -）必须嵌套在display:block样式的元素

中

由于我使用的是angular（CLI）8.0.3和Chart.js v2.8.0，因此也可能无法解决您的问题。

尽管如此，我现在还遇到了其他一些您可能会考虑的问题：到目前为止，我发现的几乎所有其他片段都已经过时了。检查您的@ViewChild注释以及Rx导入（如果它们是最新的）（即使您没有任何编译错误）

ChartJs无法在无错误的角度4中工作

1 个答案: