實現Chart.js插件流星項目

我有一個流星項目mit chart.js v2.5在客戶端。實現Chart.js插件流星項目

我想使用下面的插件。

Chartjs Plugin

我是新來的JavaScript，我無法找到如何實現這個插件在客戶端上chartjs的方式。

有人可以幫助我嗎？

感謝您的意見。

來源

2017-02-26 Michael

您可以加載在服務器上的腳本，然後將其包含在您的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 
    } 
}

來源

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插件流星項目

回答

相關問題