我无法获取更新数据所需的 Chart 对象-解网

问：

首先，对不起我的英语。你需要知道我正在从事 WebDev 项目，我刚刚开始使用 WebDev 进行实习。另外，我不是 JS 的专业人士。

有问题：我正在尝试将图表添加到Webdev网页中。我通过页面代码中的 SQL 请求收集数据。我为图表的容器创建了一个 Intern Composant，我的 javascript 代码进入了 Intern Composant 代码。

当我在导航器上测试它时，控制台捕获了“图表未定义”的错误，我认为这是真正的问题。

这是原始的 JS 代码（可在 W3 网站上找到）：

var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var barColors = [
  "#b91d47",
  "#00aba9",
  "#2b5797",
  "#e8c3b9",
  "#1e7145"
];

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      text: "World Wide Wine Production 2018"
    }
  }
});

我修改了它以删除数据，并创建了具有如下类型和标题的图表：

function jsInit()
{
    new Chart("myChart", {
      type: "doughnut",
      options: {
        title: {
          display: true,
          text: "World Wide Wine Production 2018"
        }
      }
    });
}

在另一个函数中，我尝试添加/更新数据：

function jsDonnees(sCell, tabDonnées)
{   
    var chart = document.getElementById("myChart");

    var barColors = [
        'pink',
        'blue',
        'red',
        'green',
        'orange',
        'purple'
    ]
    
    //Add data to chart
    for(var i = 0; i < tabDonnées.length; i++){
        chart.data.labels.push(tabDonnées[i].Libellé);
        chart.data.datasets.forEach((dataset)=> {
            dataset.data.push(tabDonnées[i].Utilisations);
            dataset.backgroundColor.push(barColors[i]);
        });
    }   
    
    chart.update();
}

我尝试了很多东西，但我把自己弄糊涂了...... 我尝试了这种方法，但没有用Chart.getChart(id)

JavaScript 图表 .js

const ctx = document.getElementById('myChart');
let chart;

const tabDonnées = [
  { Libellé: 'Category A', Utilisations: 30 },
  { Libellé: 'Category B', Utilisations: 45 },
  { Libellé: 'Category C', Utilisations: 20 },
  { Libellé: 'Category D', Utilisations: 70 },
  { Libellé: 'Category E', Utilisations: 10 },
];

function initializeChart() {
  chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: [],
          borderWidth: 1,
        },
      ],
    },
    options: {
      title: {
        display: true,
        text: 'World Wide Wine Production 2018',
      },
    },
  });
}

function updateChart(tabDonnées) {
  var barColors = ['pink', 'blue', 'red', 'green', 'orange', 'purple'];

  for (var i = 0; i < tabDonnées.length; i++) {
    chart.data.labels.push(tabDonnées[i].Libellé);
    chart.data.datasets[0].data.push(tabDonnées[i].Utilisations);
    chart.data.datasets[0].backgroundColor.push(barColors[i]);
  }

  chart.update();
}

initializeChart();
updateChart(tabDonnées);

您好，感谢您的回答。我试过了，但它并不像你的答案那么简单。由于我正在从事 Webdev，因此我没有一个简单的文件 .js javascript 在我用于包含图表的控件模板的代码中。即使我在全局范围内声明图表，导航器的控制台也会告诉该图表未定义

0赞 Rikako 11/16/2023

对不起，控制台的真实消息是“未执行的标识符：图表”

0赞 Rikako 11/16/2023

编辑：我刚刚修复了那个错误，这是一个错误的放置......但是现在错误是“ctx 未定义”，但是当我记录函数 document.getElementById（“myChart”）时，它显示了正确的东西

0赞 Rikako 11/16/2023 #2

首先，我要感谢您的回答和评论，帮助我清楚地看到:)

我的大部分问题都是错别字和注意力不集中。

对于那些和我有同样WebDev问题的人：

我在内部组件的控件模板中声明了全局声明let chart;
我创建了一个函数 jsInit（）来创建一个空图表：

function jsInit()
{
    const ctx = document.getElementById('myChart');
    
    chart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: [],
            datasets: [
                {
                    data: [],
                    backgroundColor: []
                }]
        },
        options: {
            title: {
                display: true,
                text: "World Wide Wine Production 2018"
            }
        }
    });
}

我使用另一个函数来添加数据（这些数据进入表格中） - 其中 sCell 是图表的容器

function jsDonnees(sCell, tabDonnées)
{
    var barColors = [
        'pink',
        'blue',
        'red',
        'green',
        'orange',
        'purple'
    ]
    
    //Ajout des données pour le graphique
    for(var i = 0; i < tabDonnées.length; i++){
        chart.data.labels.push(tabDonnées[i].Libellé);
        chart.data.datasets.forEach((dataset)=> {
            dataset.data.push(tabDonnées[i].Utilisations);
            dataset.backgroundColor.push(barColors[i]);
        });
    } 
        
        chart.update();
}

上一个：Flutter Community Charts - 如何显示 Times Chart 点值

下一个：图表 js - v 4 如何更改图表图例的顺序

我无法获取更新数据所需的 Chart 对象

I can't get the Chart Object I need to update data

评论

评论