javascript - 实现 Chart.js 插件 Meteor 项目

Question

我在客户端有一个 meteor 项目 mit Chart.js v2.5。

我想使用以下插件。

Chartjs Plugin

我是 JavaScript 新手，我找不到如何在客户端的 ChartJS 中实现此插件的方法。

有人可以帮我解决这个问题吗？

感谢您的反馈。

Answer 1

一般来说，在 Meteor 中使用 Chart.js 的最佳方式是使用 Chart.js NPM 包。从命令行运行meteor npm install Chart.js --save 导入chart.js包。然后，要在客户端页面上使用chart.js，请添加chart.js 导入并从模板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