Tự động gán màu trong biểu đồ.js 2.x không hoạt động nữa, được sử dụng để làm việc trong câu 1.x

Sử dụng Chart.js 1.x Tôi có thể tạo biểu đồ hình tròn và tự động gán màu:Tự động gán màu trong biểu đồ.js 2.x không hoạt động nữa, được sử dụng để làm việc trong câu 1.x

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
<body> 
<canvas id="myChart" width="400" height="400"></canvas> 
<script> 
var ctx = document.getElementById("myChart").getContext("2d"); 
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}]; 
var myChart = new Chart(ctx).Pie(data); 
</script> 
</body>

nếu tôi làm như vậy với v 2.x

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script> 
<body> 
<canvas id="myChart" width="400" height="400"></canvas> 
<script> 
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}]; 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels: ["Conservative", "Democratic"], 
     datasets: [{ 
      data: [5, 15], 
     }] 
    } 
}); 
</script> 
</body>

cả Pie được hiển thị trong Grey trừ khi tôi xác định màu sắc bằng tay; tui bỏ lỡ điều gì vậy? Các câu hỏi liên quan duy nhất tôi đã tìm thấy là một trong những: Random fill colors in Chart.js Tuy nhiên, như đã giải thích ở trên, nó hoàn toàn làm việc trên 1.x vì vậy nó có vẻ lạ với tôi nó không hoạt động nữa.

Nguồn

2016-10-05 Eugenio

Tôi tin rằng việc tạo ra các phối màu là toàn bộ khoa học của riêng nó. Nó có ý nghĩa với tôi rằng một cái gì đó như thế đã bị bỏ khỏi Chart.js, vì có nhiều mục tiêu quan trọng hơn để theo đuổi. Tất cả các màu được sử dụng trong các ví dụ biểu đồ trong số docs được xác định rõ ràng. Và this two-month-old issue có một phản hồi phân loại từ một thành viên Chart.js rằng các màu mặc định không có sẵn trong Chart.js 2. Vì vậy, bạn có ba lựa chọn. Sự lựa chọn đầu tiên là tự làm một số màu. Tôi đoán bạn sẽ không hỏi những câu hỏi, bạn đã vào một cái gì đó như thế (tôi biết rằng kết quả sẽ là khủng khiếp, nếu tôi đã làm một cái gì đó như thế). Lựa chọn thứ hai là tìm kiếm các bảng phối màu và máy tạo bảng màu trực tuyến và chọn một số bảng phối màu làm hài lòng bạn. Lựa chọn thứ ba và thú vị là tìm kiếm một thư viện JavaScript có thể tạo ra các lược đồ màu theo ý muốn. Có một vài lựa chọn thay thế. Một bản quyền hay, có sẵn theo giấy phép rất thuận lợi, là Colour Palette Generator. Bạn có thể thấy nó hoạt động dọc theo Chart.js 2 here. Mẫu cũng có sẵn dưới đây:

var ctx = document.getElementById("myChart"); 
 
var myData = [12, 19, 3, 5, 2, 3]; 
 
var myChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
    labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"], 
 
    datasets: [{ 
 
     label: '# of Votes', 
 
     data: myData, 
 
     backgroundColor: palette('tol', myData.length).map(function(hex) { 
 
     return '#' + hex; 
 
     }) 
 
    }] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script> 
 
<!-- This is a copy of palette.js --> 
 
<script src="https://codepen.io/anon/pen/aWapBE.js"></script> 
 
<canvas id="myChart" width="400" height="400"></canvas>

Làm thế nào để sử dụng thư viện được mô tả here. Tóm lại, bạn có thể tạo bảng màu 10 màu từ một bảng màu cụ thể bằng cách sử dụng như sau:

var seq = palette('tol-sq', 10);

Kết quả là một chuỗi các chuỗi hex (ví dụ: "eee8d5"). Để sử dụng nó khi Chart.js đang mong đợi màu sắc, bạn có thể sử dụng map để thêm "#" vào mỗi chuỗi, như trong ví dụ trên.

Nguồn

2016-10-05 22:29:31 xnakos

Xóa bảng mặc định rất đơn giản âm thanh vô lý đối với tôi (tôi thấy mã liên quan trong v1 và nó rất đơn giản) nhưng đó là lựa chọn và giải pháp của bạn hoạt động rất tốt, cảm ơn! – Eugenio

@Eugenio Trong khi di chuyển từ phiên bản này sang phiên bản khác, chức năng có thể biến mất. Nhưng các biểu đồ và plugin hoạt động thực sự tốt, vì vậy một bảng màu bên ngoài không phải là một mối phiền toái. :) – xnakos

Tự động gán màu trong biểu đồ.js 2.x không hoạt động nữa, được sử dụng để làm việc trong câu 1.x

Trả lời

Các vấn đề liên quan