2016-08-19 2 views
0

chartist를 사용하여 웹 사이트의 일부 측정 항목을 추적하고 플로팅에 어려움을 겪고 있습니다. 내가 본 주요 오류는 다음과 같습니다.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에 대한 링크이며 다음 코드로 인해 이러한 오류가 발생합니다. 라인/막대 차트의 차티스트 라벨/시리즈 조합에

series: 12 
labels: 1 

표준 입력 :

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)}") 

자바 스크립트가 파이 차트

$(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 = [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']