Come modificare il colore punto punto e lo stile nel grafico a linee Morris.js?

Question

I usa morris.js per disegnare un grafico a linee, ma non riesco a capire come modificare solo il colore e lo stile del punto nel grafico a linee. Qualcuno sa come cambiare solo gli stili di punti?

Grazie.

Answer 1

Utilizzare la proprietà pointFillColors. Dalla documentazione:

pointFillColors Colori per i punti della serie. Per impostazione predefinita, utilizza gli stessi valori di lineColors

Ecco l'esempio del grafico con la linea blu e puntini verdi:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="raphael-min.js"></script> 
<script type="text/javascript" src="morris.min.js"></script> 
<script type="text/javascript"> 
function drawChart() { 
    Morris.Line({ 
     element: 'chart', 
     data: [ 
      {y: '2012', a: 100}, 
      {y: '2011', a: 75}, 
      {y: '2010', a: 50}, 
      {y: '2009', a: 75}, 
      {y: '2008', a: 50}, 
      {y: '2007', a: 75}, 
      {y: '2006', a: 100} 
     ], 
     xkey: 'y', 
     ykeys: ['a'], 
     labels: ['Test series'], 
     lineColors: ['#0b62a4'], 
     pointFillColors: ['#00ff00'] 
    }); 
} 

window.onload = drawChart; 
</script> 
<div id="chart" style="width: 400px; height: 250px;"></div> 

Answer 2

Invece di "lineColors", prova "colori" come questo:

function drawChart() { 
Morris.Line({ 
    element: 'chart', 
    data: [ 
     {y: '2012', a: 100}, 
     {y: '2011', a: 75}, 
     {y: '2010', a: 50}, 
     {y: '2009', a: 75}, 
     {y: '2008', a: 50}, 
     {y: '2007', a: 75}, 
     {y: '2006', a: 100} 
    ], 
    colors: ['#0b62a4','#D58665','#37619d','#fefefe','#A87D8E','#2D619C','#2D9C2F'] 
}); 

}

per ogni linea ci dovrebbe essere un colore.