ChartJS 我无法获取更新数据所需的图表对象

dtcbnfnu 于 2023-11-18 发布在 Chart.js

关注(0)|答案(2)|浏览(186)

首先，对不起我的英语。你需要知道我正在做WebDev项目，我刚刚开始使用WebDev实习。而且，我不是一个JS专业人士。
但问题是：我试图将图表添加到Webdev网页中。我通过页面代码中的SQL请求收集数据。我为图表的容器创建了Intern Composant，我的JavaScript代码是Intern Composant代码。
当我在navigator上测试它时，控制台捕捉到一个错误，为“chart is undefined”，我认为这是这里真实的问题。
以下是原始的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)方法，但它没有工作

chart.js

来源：https://stackoverflow.com/questions/77486747/i-cant-get-the-chart-object-i-need-to-update-data

2条答案

按热度按时间

sy5wg1nm1#

我试着像你在代码中做的那样创建一个图表。你可以在stackblitz example上看到源代码。你的代码有一些问题，你可以在工作示例中比较和看到。
网站Map

<div>
      <canvas id="myChart"></canvas>
    </div>

字符串

index.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);

型

赞(0）回复(0）举报 2023-11-18

tag5nh1u2#

首先，我想感谢你的回答和评论，帮助我看清楚：）
我的大部分问题是打字错误和缺乏注意力。
对于那些和我一样有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();
}

型

赞(0）回复(0）举报 2023-11-18

我来回答

ChartJS 我无法获取更新数据所需的图表对象

2条答案

相关问题

热门标签

最新问答