时间戳

首页 > 解决方案 > chart.js 更新时未捕获的引用错误

charts - chart.js 更新时未捕获的引用错误

问题描述

Noob 试图学习如何使用 chart.js，并且在尝试更新图表时不断收到“未捕获的 ReferenceError：myChart 未定义”。

我的最终目标是能够将图表放在灯箱中，包括看起来工作正常的缩略图。只是不能更新图表。

这是我的 barChart.js 代码。此代码位于单独的 .js 文件中......

function drawBarChart() {

console.log("drawing bar . . .");


var myCanvas = document.getElementById("myCanvas");

var ctx = myCanvas.getContext('2d');


var myChart = new Chart(ctx, {

data: {
    labels: mylabel,
    datasets: [{
        label: '# of Votes',
        data:  data
,
        backgroundColor: [
            'black',
            'green',
            'yellow',
           'orange',
            'red',             
            'blue',
            'pink'

        ],
        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:   { responsive: true,





    annotations: {

          tooltip: {
        tooltipFontSize:18},
        textStyle:  {
            fontName: 'TimesNewRoman',
            fontSize: 12,
            bold: false}
    },
    animation: {
            onComplete:  //put chart into lightbox
function getPicToLightbox() {
var urlCode 
=document.getElementById("myCanvas").toDataURL();
document.getElementById("url").innerHTML = urlCode;

    var imgTag = 
document.getElementById("imageSource");
    imgTag.src= urlCode;
    imgTag.href = urlCode;

     var getLightBox = 
document.getElementById("lightbox1");
     getLightBox.href = urlCode;
     console.log("imgTag = " + imgTag);
}




}  

}


});






         }

以下是我的更新代码：

function update() {


    addData(myChart,mylabel ,data);
 addData(myRadarChart,mylabel ,data);

var urlCode 
=document.getElementById("myCanvas").toDataURL();
document.getElementById("url").innerHTML = urlCode;

    var imgTag = 
document.getElementById("imageSource");
    imgTag.src= urlCode;
    imgTag.href = urlCode;

     var getLightBox = 
document.getElementById("lightbox1");
     getLightBox.href = urlCode;
     console.log("imgTag = " + imgTag);
  };


        function addData(chart, label, data) {
chart.data.labels = label;
chart.data.datasets.forEach((dataset) => {
    dataset.data = data;
});
chart.update();

我不确定为什么实例化图表的名称是错误的？

html代码：

<div id ="chart_div">

 <canvas id="myCanvas" ></canvas> <!-- 
style="display:none" put on other page-->

  <canvas id="myChart2"></canvas>


    <div id ="gauge"></div>
    <div id="piechart"></div> <!--//style="width: 
900px; height: 500px;"-->
     </div>

            <a href="" id = "lightbox1" data- 
lightbox="barChart" >
            <img id = "imageSource" src = ""/> 
            </a>

提前致谢

标签： chartschart.jsinstantiation

解决方案

图表需要在函数之外声明 -->drawBarChart
以便从另一个函数访问 -->update

像这样... 

// add declaration here
var myChart;

function drawBarChart() {

console.log("drawing bar . . .");


var myCanvas = document.getElementById("myCanvas");

var ctx = myCanvas.getContext('2d');

// remove var here
myChart = new Chart(ctx, {

...

推荐阅读