Chartjs 顯示更多單擊按鈕的數據集

Question

我已經使用chart.js創建了一個條形圖，我只需要在第一次加載時顯示幾組數據，如果有超過 6 個可用數據，我們應該顯示更多按鈕，點擊該按鈕，我們應該顯示所有剩余的數據。

這是小提琴： https : //jsfiddle.net/moviecrew/wk1aejso/8/

我試圖用所有數據創建一個新變量並將它們切片以僅顯示數據數量：

for (var i = 0; i <= 5 ; i++) {
  campSourceLabels.push[campSourceLabelsAll[i]];
  campSourceLabels.push[campSourceDataTvAll[i]];
  campSourceLabels.push[campSourceDataTlAll[i]];
  campSourceLabels.push[campSourceDataCrAll[i]];
}

其中campSourceLabelsAll將擁有所有數據。

Answer 1

這是我的解決方案。 您將所有數據保存在變量中，並在開始時僅顯示少數數據。 當您單擊按鈕時，您會更改顯示的數據。 我總是將我的數據和選項保存在單獨的變量中，以便於訪問。

重要代碼（沒有options 、顏色和注釋） （完整代碼與實時預覽在這里（JSBin）） ：

var campSourceLabels = ["Facebook", "Google", "Landing \nPage", "Email \nCampaign", "Alt landing \npage", "Forum \nLink"];
var campSourceDataTv = [64, 66, 99, 76, 59, 76];
var campSourceDataTl = [36, 53, 76, 70, 55, 89];
var campSourceDataCr = [47, 47, 69, 47, 47, 47];
var displayCount = 4

function showAllData() {
  chartData.labels = campSourceLabels
  chartData.datasets[0].data = campSourceDataTv
  chartData.datasets[1].data = campSourceDataTl
  chartData.datasets[2].data = campSourceDataCr
  chart2.update()
}

var chartData = {
  labels: campSourceLabels.slice(0, displayCount),
  datasets: [{
    label: 'Total Visitors',
    data: campSourceDataTv.slice(0, displayCount)
  }, {
    label: 'Total Leads',
    data: campSourceDataTl.slice(0, displayCount)
  }, {
    label: 'Conversion rate',
    data: campSourceDataCr.slice(0, displayCount)
  }]
}
var chartOptions = { ... }

var ctx = document.getElementById('chart2').getContext('2d');
window.chart2 = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: chartOptions
});