Mặc định phong cách trực quan trong Chart.js biểu đồ thanh

Question

Các doc đưa ra một ví dụ nhỏ về biểu đồ thanh:

var data = { 
    labels : ["January","February","March","April","May","June","July"], 
    datasets : [ 
     { 
      fillColor : "rgba(220,220,220,0.5)", 
      strokeColor : "rgba(220,220,220,1)", 
      data : [65,59,90,81,56,55,40] 
     }, 
     { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,1)", 
      data : [28,48,40,19,96,27,100] 
     } 
    ] 
} 

và sau đó để tạo ra các biểu đồ sử dụng new Chart(ctx).Bar(data);

Có thể xác định xem riêng biệt với dữ liệu tức là xác định fillColor và strokeColor ở một nơi khác chỉ để lại data trong các đối tượng datasets? Giả sử tôi chỉ muốn một bộ dữ liệu.

Tôi muốn tạo dữ liệu (nhãn và giá trị) trong back-end và để lại chi tiết chế độ xem cho giao diện người dùng.

Các tùy chọn chính thức không mong đợi điều này.

---

Đốc: http://www.chartjs.org/docs/#barChart

Answer 1

Bạn chính xác trong đó chartjs không hỗ trợ các thuộc tính đó làm tùy chọn toàn cầu.

May mắn thay, một sửa chữa nhanh chóng sẽ yêu cầu bạn phải dòng nguồn thay đổi duy nhất bao gồm ...

data.datasets[i].fillColor 

..., ví dụ:

config.fillColor || data.datasets[i].fillColor 

... dẫn đến một cái gì đó tương tự đến:

ctx.fillStyle = config.fillColor || data.datasets[i].fillColor; 

Điều tương tự cũng áp dụng cho strokeColor.

Sau đó, bạn có thể thêm thuộc tính fillColor vào cấu hình chung hoặc đưa vào bộ dữ liệu.

Answer 2

Bạn có thể tính toán lựa chọn dựa trên tùy chọn ChartJS' trên máy chủ là tốt, nếu needbe và thông qua đó như một tham số để

new Chart(ctx).Bar(data,options); 

như

new Chart(ctx).Bar(data,{fillColor : "rgba(151,187,205,0.5)", strokeColor :"rgba(151,187,205,1)",}); 

vì ChartJS thực hiện hợp nhất các tùy chọn trong

function mergeChartConfig(defaults,userDefined){ 
    var returnObj = {}; 
    for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; } 
    for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; } 
    return returnObj; 
} 

Bạn có thể chỉnh sửa để cung cấp cho bạn hiệu quả bạn muốn! https://github.com/nnnick/Chart.js/blob/master/Chart.js