Chartist.js 类型错误

Question

我正在使用 chartist 来跟踪网站的一些指标，并且运行遇到了绘图方面的困难。我看到的主要错误如下

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

第一个错误出现在第 8:3570 行，这可能无济于事。第二个发生在 8:27311 处，这也可能无济于事，在 chartist.min.js 插件中，这里是 link 到 chartist min and 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 &nbsp;
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 &nbsp;
    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 &nbsp;
    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 &nbsp;
    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

line/bar 图表 labels/series 组合的标准输入：

 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/labels 组合将显示为这样。

Series/Labels:

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']

Chartist.js 类型错误

Chartist.js Type Errors

javascript

node.js

chartist.js

pug