0

私は chartist を使用してウェブサイトのいくつかの指標を追跡していますが、プロットで問題が発生しています。私が見ている主なエラーは次のとおりです

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

最初のエラーは行 8:3570 で発生しますが、おそらく役に立ちません。2 つ目は 8:27311 で発生しますが、これもおそらく役に立たないでしょう。

翡翠の断片

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

提供できる追加情報があればお知らせください。コンテンツの量を、必要と思われる量に減らすようにしました。

4

1 に答える 1

0

この問題は、chartist の棒グラフと折れ線グラフへの系列入力に起因します。Chartist は、ネストされた配列として入力を取り込み、複数の系列のプロットを可能にします。したがって、プロットされるシリーズが 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']
于 2016-08-22T19:35:54.250 に答える