实施 Chart.js 插件 Meteor 项目答案

【问题标题】：Implement Chart.js Plugin Meteor Project实施 Chart.js 插件 Meteor 项目
【发布时间】：2017-02-28 00:43:29
【问题描述】：

我在客户端有一个流星项目 mit chart.js v2.5。

我想使用以下插件。

Chartjs Plugin

我是 javascript 新手，我找不到如何在客户端的 chartjs 中实现这个插件的方法。

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

感谢您的反馈。

【问题讨论】：

标签： javascript meteor chart.js

【解决方案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

【讨论】：

如果这对其他人有帮助；我有错误“错误：找不到模块'chart'”，这是通过在我的js文件顶部使用require而不是import来修复的：const Chart = require('chart.js');或通过在导入中添加“js”：import { Chart } from 'chart.js';

【解决方案2】：

您可以在服务器上加载脚本，然后将其包含在您的 html 中（如示例 downsample samples）...

<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
    }
}

【讨论】：