chart.js 2.7.1 |使用变量更新图表

问题描述 投票:1回答:1

我正在尝试在我的网站上使用chart.js。但是我在更新它时遇到了一些问题。

HTML:

  <a href="#" class="date-select" data-chart="dishesChart" data-period="day">day</a>
  <a href="#" class="date-select" data-chart="dishesChart" data-period="week">week</a>
  <a href="#" class="date-select" data-chart="dishesChart" data-period="month">month</a>

  <canvas id="dishesChart" style="width: 100%;"></canvas>

JS:

var dishesChartCanvas = document.getElementById("dishesChart");

var dayDataset = {
   datasets: [{
     data: [1, 2, 3, 4, 5]
   }],

   labels: [
     some data array
   ]
};

// here comes same variables for week and month datasets


var dishesChart = new Chart(dishesChartCanvas, {
  type: 'pie',
  data: dayDataset, // default
  options: dishesChartOptions
});

问题是:此代码正常工作:

$('.date-select').on('click', function(e) {
  e.preventDefault();
  dishesChart.data.datasets[0].data = monthDataset.datasets[0].data;
  dishesChart.data.labels = monthDataset.labels;
  dishesChart.update();
});

但是这段代码给出了Uncaught TypeError:无法读取属性

$('.date-select').on('click', function(e) {
  e.preventDefault();
  var chartname = $(this).data("chart");
  var period = $(this).data("period") + "Dataset";
  chartname.data.datasets[0].data = period.datasets[0].data;
  chartname.data.labels = period.labels;
  chartname.update();
});

我是JS和jQuery的新手,所以让我知道我做错了什么。

谢谢!

UPD:固定

默认情况下,data-attribute是string,要将其转换为对象,您应该添加window [var_name]:

问题:

var chartname = $(this).data("chart");

解:

var chartname = window[$(this).data("chart")];

javascript jquery chart.js chart.js2
1个回答
0
投票
var chartname = window[$(this).data("chart")];
© www.soinside.com 2019 - 2024. All rights reserved.