Chartist.js類型錯誤

Question

我正在使用圖表專家來跟蹤網站的一些指標，並在繪圖過程中遇到困難。 我看到的主要錯誤如下

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 min和chartist 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']

如果可以提供其他信息，請告訴我。 我試圖將內容的數量減少到我認為必要的水平。

Answer 1

問題源於圖表條形圖和折線圖中的系列輸入。 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']