2016-07-07 35 views
7

2 tip grafik çubuğu ve çizgim var. Bu (ince) benim görünümdür:Satır grafiğinde renk ayrıştırılamıyor (angular-chart.js)

canvas#line.chart.chart-line(
     ng-if="stateStats == 'global'" 
     chart-data="data" 
     chart-labels="labels" 
     chart-colours="colours" 
    ) 
    canvas#bar.chart.chart-bar(
     ng-if="stateStats != 'global' && data.length != 0" 
     chart-data="data" 
     chart-labels="labels" 
     chart-options="optionsBarChart" 
    ) 

Benim renkler seçeneği:

$scope.colours = [{ 
    fillColor: "rgba(151,187,205,0.2)", 
    strokeColor: "rgba(151,187,205,1)", 
    pointColor: "rgba(151,187,205,1)", 
    pointStrokeColor: "#fff", 
    pointHighlightFill: "#fff", 
    pointHighlightStroke: "rgba(151,187,205,0.8)" 
    }]; 

Sorunum çizgi grafiği görüntüleniyor verilerin bir rengini değiştirmez olmasıdır. Ve imleci nokta üzerinde hareket ettirmek istediğimde - Hatam var:

Yakalanmamış Hata: [rgba (151,187,205,1) ”," rgba (220,220,220,1) "nesnesinden renk ayrıştırılamıyor ... ] Neyi yanlış yaptım?

+0

tıkladığınızda [şablonu] kullanarak tam repro dava sonrası deneyebilir miyim (http://jsbin.com/cucoqe/1/edit?html,js,output)? – jtblin

+7

Veri dizisini doğrudan geçirdiğimde de aynı sorunla karşılaştım. Bunun yerine, başka bir dizide, örn. veri = "[[1, 2, 3]]". Veri tanımını dahil etmediğiniz için aynı soruna sahip olup olmadığınızı söyleyemezsiniz. – tom

cevap

40

Verilerinizin çift dizide olduğundan emin olun.

Ör: Ben chart.js kullanarak ve bir noktaya üzerine gelindiğinde aynı durum vardı

data = [ 
    [10, 20, 30, 20, 10] 
]; 
+0

için teşekkürler :) – vin

+0

hehe :-D Neredeyse bir gün israf ettim :-P Ve hoşgeldiniz :) –

+0

spot, teşekkürler! – camara90100

9

. Verilerimi çift diziye koyduğumda grafik hiçbir şey göstermedi.

Çözüm: Grafikte "satır" varsa, arka plan ve kenarlık için bir renk dizisi, ancak tek renk almaz. Bu benim için çalıştı:

var chart = new Chart(chartCanvas, { 
    type : 'line', 
    data : { 
     labels : dates, 
     datasets : [{ 
       label : 'Error', 
       data : errorCounts, 
       backgroundColor : 'rgba(255, 99, 132, 0.2)', 
       borderColor : 'rgba(255,99,132,1)', 
       borderWidth : 1 
      }, { 
       label : 'Ok', 
       data : okCounts, 
       backgroundColor : 'rgba(75, 202, 72, 0.2)', 
       borderColor : 'rgba(117,239,95,1)', 
       borderWidth : 1 
      } 
     ] 
    }, 
    options : { 
     responsive : true, 
     scales : { 
      yAxes : [{ 
        ticks : { 
         beginAtZero : true 
        } 
       } 
      ] 
     } 
    } 
}); 
+0

Bu benim hatamdı, teşekkürler –