tooltip etiketini göster ama chartjs satır şeması için x ekseninde değil

Question

Şu anda chart.js ile bir çizgi grafik kullanıyorum ve bu ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"] gibi görünen bir etiket kümesine sahibim. İlgili etiketin, grafik için araç ipucunda görünmesini istiyorum, ancak kalabalıkları önlemek için her bir alternatif etiketin grafiğin x ekseninde görünmesini istiyorum. Bunu başarabileceğim bir yol var mı?

Şu anda dizimdeki her ikinci değeri "" ile değiştiriyorum, ancak bu, kalabalıktaki x eksenimden kaldırılırken, etiketi araç ipucunda gösterme gereksinimimi karşılamıyor.

Answer 1

Sadece başlatmasından sonra istemediğiniz xLabels çizgi grafiği genişletmek ve değiştirmek

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 
     var xLabels = this.scale.xLabels 
     xLabels.forEach(function (label, i) { 
      if (i % 2 == 1) 
       xLabels[i] = ''; 
     }) 
    } 
}); 


var lineChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
    datasets: [ 
     { 
      fillColor: "#79D1CF", 
      strokeColor: "#79D1CF", 
      data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myLine = new Chart(ctx).LineAlt(lineChartData); 

---

Fiddle - potatopeelings üzerinde uzatmak için http://jsfiddle.net/ttz5t3dx/

---

Answer 2

Cevap, yapabiliriz:

var xLabels = this.scale.xLabels 
var modVal = Math.ceil(xLabels.length/10)      
xLabels.forEach(function (label, i) 
{ 
    if (i % modVal != 0) 
     xLabels[i] = ''; 
}) 

etiket sayısını sınırlamak için (bu durumda 10), etiketleriniz kaç veri noktanız olursa olsun asla kalabalık olmayacaktır.

Answer 3

Grafik JS V2 üzerinde bunu başarmak isteyen herkes için aşağıdaki çalışır: xAxes Eğer altında, Grafik Seçenekleri At

myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: options 
});` 

Answer 4

:

var options = { 
     scales: { 
      xAxes: [{ 
       afterTickToLabelConversion: function(data){ 


       var xLabels = data.ticks; 

       xLabels.forEach(function (labels, i) { 
        if (i % 2 == 1){ 
         xLabels[i] = ''; 
        } 
       }); 
      } 
     }] 
    } 
} 

Sonra içine zamanki gibi değişken parametreler geçirilmesi maxTickLimit özelliği belirtebilirsiniz ne kadar sizin gibi:

xAxes: [{ 
     ticks: { 
     autoSkip:true, 
     maxTicksLimit:3 
     } 
    }] 

Fiddle: https://jsfiddle.net/p63z7zys/1/

Answer 5

Bu, ChartJs kullanırken uğraştığım en zor şeylerden biriydi.

Çözümümü paylaşacağım: Sadece grafik seçenekleri ile oynadım. Önce xAxe'm için bazı özellikleri tanımlayacağım.

tooltips: { 
     callbacks: { 
      title : (tooltipItems, data) => { 
       var labelIndex = tooltipItems[0].index; 
       var realLabel = data.labels[labelIndex]; 
       return realLabel + "TOOLTIP"; 
     } 
    } 
    } 

kullanma: Ben araç ipuçları için geri aramalar seçeneklerini kullanmak için gidiyorum ipucu başlığı biçimlendirmek için

scales: { 
    xAxes: [{ 
     id: "x-", stacked: false, ticks: { 
     autoSkip: false, callback: (label) => { return label + "TEST" } } 
     } 
    ]} 

: Ben geri arama kullanarak etiket biçimlendirme ediyorum unutmayın grafik seçenekleri, x ekseni etiketleri ve ilgili araç ipucu başlıkları için farklı içerik gösterebiliyorum:

enter image description here

Tüm örnekte here bulabilirsiniz.

Bu yardımcı olur umarım.