Chart.jsプラグインメテオプロジェクトの実装

私はクライアントでchart.js v2.5の流星プロジェクトを持っています。Chart.jsプラグインメテオプロジェクトの実装

私は次のプラグインを使いたいと思います。

Chartjs Plugin

私はJavaScriptに新たなんだと私は、クライアント側でchartjsにこのプラグインを実装する方法方法を見つけることができません。

誰か助けてもらえますか？

フィードバックに感謝します。

出典

2017-02-26 Michael

あなたは、サーバー上でスクリプトをロードし（例downsample samplesのように）あなたの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 
    } 
}

出典

2017-02-27 01:13:05 rhill

、流星に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

出典

2017-02-27 16:43:29 jordanwillis

Chart.jsプラグインメテオプロジェクトの実装

答えて

関連する問題