chart.js dosyasında otomatik renkler atama 2.x artık çalışmıyor, v içinde çalışmakta olan v. 1.x

Chart.js 1.x'i kullanarak bir pasta grafiği oluşturabilir ve renkleri otomatik olarak atayabilirim:chart.js dosyasında otomatik renkler atama 2.x artık çalışmıyor, v içinde çalışmakta olan v. 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>

Ben renkleri elle belirtmedikçe

<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>

bütün Pie Gray görüntülenen v 2.x ile aynı yaparsanız; bir şey mi özlüyorum Ben bulduğum tek ilgili soru şu: Random fill colors in Chart.js, yukarıda açıklandığı gibi, mükemmel 1.x üzerinde çalıştı, bu yüzden artık işe yaramazsa garip görünüyor.

kaynak

2016-10-05 Eugenio

Renk şemalarının yaratılmasının kendi başına bir bilim olduğuna inanıyorum. Chart.js'den dışarıda bırakılan bir şey olduğu için benim için mantıklı geliyor çünkü takip edilmesi gereken daha kritik hedefler var. docs'daki grafik örneklerinde kullanılan tüm renkler açıkça tanımlanmıştır. Ve this two-month-old issue, Chart.js üyesinden Charlks 2'de varsayılan renklerin bulunmadığı kategorik bir yanıt sunar. Böylece, üç seçeneğiniz vardır. İlk seçenek, bazı renkleri kendiniz yapmaktır. Sanırım soruyu sormadınız, böyle bir şeye girdiniz mi (I böyle bir şey yaptıysa sonuçların korkunç olacağını biliyorum). İkinci seçenek, renk şemalarını ve renk şeması üreticilerini çevrimiçi aramak ve sizi memnun edecek bazı renk şemaları seçmek. Üçüncü ve ilginç seçim, ilerde renk şemaları üretebilen bir JavaScript kütüphanesi aramaktır. Bir kaç alternatif seçenek var. Çok izin verilen bir lisans altında bulunan güzel bir tanesi, Colour Palette Generator. Chart.js 2 here boyunca hareket halinde görebilirsiniz. Numune aşağıda da mevcuttur:

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>

Nasıl kütüphane here açıklanmıştır kullanmak. Kısaca, aşağıdakileri kullanarak belirli bir renk düzeni 10 bir palet oluşturmak edilebilir:

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

sonuç heks dizeleri (örneğin, "eee8d5") bir dizidir. Chart.js'nin renkleri beklediği yerde kullanmak için, yukarıdaki örnekte olduğu gibi her dizeye "#" değerini eklemek için map'u kullanabilirsiniz.

kaynak

2016-10-05 22:29:31 xnakos

Çok basit varsayılan palet seslerini çıkartmak bana mantıksız geliyor (ilgili kodu v1'de gördüm ve çok basitti) ama bu seçim ve çözümünüz çok iyi çalışıyordu, teşekkürler! – Eugenio

@Eugenio Bir sürümden diğerine geçerken işlevler kaybolabilir. Ama çizelgeler ve eklentiler gerçekten iyi çalışıyor, bu yüzden harici bir palet bir sıkıntı değil. :) – xnakos

chart.js dosyasında otomatik renkler atama 2.x artık çalışmıyor, v içinde çalışmakta olan v. 1.x

cevap

İlgili konular