實施Chart.js插件流星項目

Question

我在客戶端有一個流星項目mit chart.js v2.5。

我想使用以下插件。

Chartjs插件

我是javascript的新手，我找不到在客戶端的chartjs中實現此插件的方法。

有人可以幫我嗎？

感謝您的反饋。

Answer 1

通常，在Meteor中使用chart.js的最佳方法是使用chart.js NPM軟件包。 meteor npm install chart.js --save運行meteor npm install chart.js --save導入chart.js包。 然后，要在客戶端頁面上使用chart.js，請添加一個chart.js導入，並通過Template onRendered回調實例化該圖表。

如果圖表依賴於已發布集合中的數據，則必須首先確保訂閱已完成，然后再渲染圖表（使用Tracker.afterFlush() ）。 這是一起顯示所有這些元素的示例。

模板文件：

<template name="kpi_application_status">
  <canvas id="kpiApplicationStatus"></canvas>
</template>

模板定義：

import { Template } from 'meteor/templating';
import { Kpis } from '../../../api/kpis/kpis.js';
import { Chart } from 'chart'

import './kpi-application-status.html';

var buildChart = function() {
  var kpi = Kpis.find({kpi_type: 'application_status'});

  if (kpi.count() > 0) {
    var labels = [];
    var data = [];
    var color = [];

    kpi.forEach((record) => {
      record.kpis.forEach((item) => {
        labels.push(item.status);
        data.push(item.count);

        switch(item.status) {
          case 'Unvalidated':
            color.push('#FD625E');
            break;
          case 'Validated':
            color.push('#01a982');
            break;
        }
      });
    });

    var chartData = {
      labels: labels,
      datasets: [
        {
          data: data,
          backgroundColor: color,
          hoverBackgroundColor: color
        }
      ]
    };

    var kpiApplicationStatus = this.$('#kpiApplicationStatus');
    var doughnutChart = new Chart(kpiApplicationStatus, {
      type: 'doughnut',
      data: chartData,
      options: {
        responsive: true,
        legend: {
          display: true,
          position: 'bottom',
          labels: {
                        generateLabels: function(chart) {
                            var data = chart.data;
                            if (data.labels.length && data.datasets.length) {
                                return data.labels.map(function(label, i) {
                                    var meta = chart.getDatasetMeta(0);
                                    var ds = data.datasets[0];
                                    var arc = meta.data[i];
                                    var custom = arc.custom || {};
                                    var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                                    var arcOpts = chart.options.elements.arc;
                                    var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                    var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                    var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

                                    return {
                                        text: label + " (" + ds.data[i] + ")",
                                        fillStyle: fill,
                                        strokeStyle: stroke,
                                        lineWidth: bw,
                                        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

                                        // Extra data used for toggling the correct item
                                        index: i
                                    };
                                });
                            } else {
                                return [];
                            }
                        }
                    }
        },
        tooltips: {
          mode: 'label'
        },
        showAllTooltips: true
      }
    });
  }
};

Template.kpi_application_status.onRendered(function() {
  this.subscribe('chartData', 'application_status', () => {
    Tracker.afterFlush(() => {
      buildChart();
    })
  });
});

由於您還嘗試使用附加的chart.js插件，因此只需確保還使用相同的命令行方法導入相應的NPM包：

meteor npm install chartjs-plugin-downsample --save

Answer 2

您可以將腳本加載到服務器上，然后將其包含在html中（如下采樣示例所示 ）...

<head>
  <title>Scatter Chart</title>
  <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
  <script src="../chartjs-plugin-downsample.js"></script>

否則，您可以獲取腳本的源代碼並將其放在頁面的JavaScript中。

無論哪種情況，然后在選項部分中添加下采樣設置...

options: {
    downsample: {
        enabled: true,
        threshold: 500 // max number of points to display per dataset
    }
}