Làm cách nào để thay đổi màu sắc và kiểu chấm điểm trong biểu đồ đường Morris.js?

Question

Tôi sử dụng morris.js để vẽ đồ thị biểu đồ đường kẻ, nhưng tôi không thể tìm ra cách thay đổi chỉ màu chấm và kiểu trong biểu đồ dạng đường. Có ai biết cách thay đổi kiểu chấm chỉ không?

Cảm ơn.

Answer 1

Sử dụng thuộc tính pointFillColors. Từ tài liệu:

pointFillColors Màu sắc cho điểm chuỗi. Theo mặc định sử dụng các giá trị tương tự như lineColors

Dưới đây là ví dụ về bảng xếp hạng với dòng màu xanh và dấu chấm màu xanh lá cây:

<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

Thay vì "lineColors", hãy thử "màu sắc" như thế này:

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'] 
}); 

}

cho mỗi dòng cần có một màu.