2016-08-19 104 views
0

我正在使用圖表追蹤某個網站的一些指標,並遇到了與繪圖有關的問題。我看到的主要錯誤如下Chartist.js類型錯誤

TypeError: a.series.map is not a function 
TypeError: d.normalized[e].forEach is not a function 

第8行的第一個錯誤是:3570,這可能沒有幫助。第二個發生在8:27311,這也可能不會幫助,在chartist.min.js插件,這裏是一個鏈接到chartist minchartist full和下面的代碼導致這些錯誤。

玉片斷

body 
    .circle-box 
     block circle-box-content 
      body 
       h3.fine 
        span.small Percentage of Creators Involved in an Approved Video 
       hr.dfw 
       .ct-chart.metric.pciav(data-metrics="#{JSON.stringify(data.pciav.metrics)}" data-labels="#{JSON.stringify(data.pciav.labels)}") 
       hr.dfw 
       h3.fine 
        span.small Percentage of Creators Who Have Sent an Invite 
       hr.dfw 
       .ct-chart.metric.pcsi(data-metrics="#{JSON.stringify(data.pcsi.metrics)}" data-labels="#{JSON.stringify(data.pcsi.labels)}") 
       hr.dfw 
       h3.fine 
        span.small Percentage of Creators Who Have Uploaded a Video 
       hr.dfw 
       .ct-chart.metric.pcicv(data-metrics="#{JSON.stringify(data.pcicv.metrics)}" data-labels="#{JSON.stringify(data.pcicv.labels)}") 
h3.fine 
span.bold Number of Creators Accounts Created   
br 
span.small Past 30 Days 
hr.dfw.chart 
.ct-chart.metric.ncac(data-metrics="#{JSON.stringify(data.ncac.metrics)}" data-labels="#{JSON.stringify(data.ncac.labels)}") 

br 
br 
h3.fine 
    span.bold Total Videos Uploaded   
    br 
    span.small Past 30 Days 
hr.dfw.chart 
.ct-chart.metric.tvu(data-metrics="#{JSON.stringify(data.tvu.metrics)}" data-labels="#{JSON.stringify(data.tvu.labels)}") 

br 
br 

h3.fine 
    span.bold Percentage of Approved Videos   
    br 
    span.small Past 30 Days 
hr.dfw.chart 
.ct-chart.metric.pav(data-metrics="#{JSON.stringify(data.pav.metrics)}" data-labels="#{JSON.stringify(data.pav.labels)}") 

h3.fine 
    span.bold Average Number of Credits in Videos   
    br 
    span.small Past 30 days 
hr.dfw 
.ct-chart.metric.ancv(data-metrics="#{JSON.stringify(data.ancv.metrics)}" data-labels="#{JSON.stringify(data.ancv.labels)}") 

JavaScript代碼段

$(document).ready(function(){ 

... 

var circleClass = ['.pciav', '.pcsi', '.pcicv']; 

for (circle of circleClass) { 
    new Chartist.Pie('.ct-chart.metric'+circle, { 
     labels : $('.ct-chart.metric'+circle).data('labels'), 
     series : $('.ct-chart.metric'+circle).data('metrics') 
    }); 
} 

... 

var metricBarCharts = ['.ncac', '.tvu']; 

for(barChart of metricBarCharts){ 
    new Chartist.Bar('.ct-chart.metric'+barChart, { 
     labels: $('.ct-chart.metric'+barChart).data('labels'), 
     series: $('.ct-chart.metric'+barChart).data('metrics')  
    }); 
} 

... 

var metricLineCharts = ['.pav', '.ancv']; 

for(lineChart of metricLineCharts){ 
    new Chartist.Line('.ct-chart.metric'+lineChart, { 
     labels: $('.ct-chart.metric'+lineChart).data('labels'), 
     series: $('.ct-chart.metric'+lineChart).data('metrics')  
    }); 
} 

} 

餅圖標準輸入:

series: 12 
labels: 1 

標準輸入到用於線路/條形圖的圖表分析標籤/串聯組合:

series = [91,91,91,91,91,93,93,93,93,95,95,96,97,98,98,98,100,101,101,101,101,101,101,102,102,102,102,102,102,102,103] 

labels = ['Jul 19','Jul 20','Jul 21','Jul 22','Jul 23','Jul 24','Jul 25','Jul 26','Jul 27','Jul 28','Jul 29','Jul 30','Jul 31','Aug 01','Aug 02','Aug 03','Aug 04','Aug 05','Aug 06','Aug 07','Aug 08','Aug 09','Aug 10','Aug 11','Aug 12','Aug 13','Aug 14','Aug 15','Aug 16','Aug 17','Aug 18'] 

請讓我知道是否有我可以提供的其他信息。我試圖將內容的數量減少到我認爲必要的程度。

回答

0

該問題源自圖表欄和折線圖的系列輸入。 Chartist將輸入視爲嵌套數組,以允許繪製多個系列。所以即使只繪製了一個系列,你也需要有一個嵌套數組。因此,結果的系列/標籤組合將如此顯示。

系列/標籤:

series = [[91,91,91,91,91,93,93,93,93,95,95,96,97,98,98,98,100,101,101,101,101,101,101,102,102,102,102,102,102,102,103]] 

labels = ['Jul 19','Jul 20','Jul 21','Jul 22','Jul 23','Jul 24','Jul 25','Jul 26','Jul 27','Jul 28','Jul 29','Jul 30','Jul 31','Aug 01','Aug 02','Aug 03','Aug 04','Aug 05','Aug 06','Aug 07','Aug 08','Aug 09','Aug 10','Aug 11','Aug 12','Aug 13','Aug 14','Aug 15','Aug 16','Aug 17','Aug 18']