ChartJS X eksenindeki Yeni Satırlar \ n 'Etiketler veya ChartJS ile Grafik veya Araç Çubuğunda Daha Fazla Bilginin Görüntülenmesi V2

Question

Kullanmadan daha fazla bilgi edinebilen bir çubuk grafik oluşturmaya çalışmak için chart.js (V2) kullanıyorum üzerine gelmek veya herhangi bir yere tıklamanız gerekiyor. Grafiğimi nasıl düzenleyeceğimi iki örnek verdim.

Two edited versions of what I hope to achieve

olarak ben etiket dışında, (bir yere) bazı ekstra bilgi vermek istiyoruz, görülebilir. Bunun üzerine

var barChartData = { 

     labels: playerNames, 
     datasets: [{ 
      label: 'Actual Score/Hour', 
      backgroundColor: "rgba(0, 128, 0,0.5)", 
      data: playerScores 
      }, { 
      label: 'Expected Score/Hour', 
      backgroundColor: "rgba(255,0,0,0.5)", 
      data: playerExpected 
     }] 
    }; 
function open_win(linktosite) { 
      window.open(linktosite) 
     } 
     canvas.onclick = function(evt){ 
      var activePoints = myBar.getElementsAtEvent(evt); 
      console.log(activePoints); 
      linktosite = 'https://www.mytestsite.com/' + activePoints[1]['_model']['label']; 
      open_win(linktosite); 
}; 
window.onload = function() { 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData, 
      options: { 
       title:{ 
        display:true, 
        text:"Player Expected and Actual Score per Hour" 
       }, 
       tooltips: { 
        mode: 'label' 
       }, 
       responsive: true, 
       scales: { 
        xAxes: [{ 
         stacked: false, 
        }], 
        yAxes: [{ 
         stacked: false 
        }] 
       }, 
       animation: { 
        onComplete: function() { 
         var ctx = this.chart.ctx; 
         ctx.textAlign = "center"; 
         Chart.helpers.each(this.data.datasets.forEach(function (dataset) { 

          Chart.helpers.each(dataset.metaData.forEach(function (bar, index) { 
           // console.log("printing bar" + bar); 
           ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10); 
           }),this) 
           }),this); 
        } 
       } 
      } 
     }); 
     // Chart.helpers.each(myBar.getDatasetMeta(0).data, function(rectangle, index) { 
     // rectangle.draw = function() { 
     //  myBar.chart.ctx.setLineDash([5, 5]); 
     //  Chart.elements.Rectangle.prototype.draw.apply(this, arguments); 
     //  } 
     // }, null);    
    }; 

: Ben etiketlere '\ n' ekleyerek ben bazı Düzenlenen kod darbe sağlanır

seçenek A'ya benzer aradığı şeyi elde edebilir olabileceğini umut vardı point barda herhangi bir yere extradata sahip olmaktan memnun olurum. Herhangi bir yardım takdir edilecektir. Teşekkür ~

Chart.js v2.1 ile

Answer 1

, bu

---

önizlemesini

---

Komut yapmak için bir grafik eklentisi yazabilirsiniz

Chart.pluginService.register({ 
    beforeInit: function (chart) { 
     var hasWrappedTicks = chart.config.data.labels.some(function (label) { 
      return label.indexOf('\n') !== -1; 
     }); 

     if (hasWrappedTicks) { 
      // figure out how many lines we need - use fontsize as the height of one line 
      var tickFontSize = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].ticks.fontSize, Chart.defaults.global.defaultFontSize); 
      var maxLines = chart.config.data.labels.reduce(function (maxLines, label) { 
       return Math.max(maxLines, label.split('\n').length); 
      }, 0); 
      var height = (tickFontSize + 2) * maxLines + (chart.options.scales.xAxes[0].ticks.padding || 0); 

      // insert a dummy box at the bottom - to reserve space for the labels 
      Chart.layoutService.addBox(chart, { 
       draw: Chart.helpers.noop, 
       isHorizontal: function() { 
        return true; 
       }, 
       update: function() { 
        return { 
         height: this.height 
        }; 
       }, 
       height: height, 
       options: { 
        position: 'bottom', 
        fullWidth: 1, 
       } 
      }); 

      // turn off x axis ticks since we are managing it ourselves 
      chart.options = Chart.helpers.configMerge(chart.options, { 
       scales: { 
        xAxes: [{ 
         ticks: { 
          display: false, 
          // set the fontSize to 0 so that extra labels are not forced on the right side 
          fontSize: 0 
         } 
        }] 
       } 
      }); 

      chart.hasWrappedTicks = { 
       tickFontSize: tickFontSize 
      }; 
     } 
    }, 
    afterDraw: function (chart) { 
     if (chart.hasWrappedTicks) { 
      // draw the labels and we are done! 
      chart.chart.ctx.save(); 
      var tickFontSize = chart.hasWrappedTicks.tickFontSize; 
      var tickFontStyle = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].ticks.fontStyle, Chart.defaults.global.defaultFontStyle); 
      var tickFontFamily = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].ticks.fontFamily, Chart.defaults.global.defaultFontFamily); 
      var tickLabelFont = Chart.helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); 
      chart.chart.ctx.font = tickLabelFont; 
      chart.chart.ctx.textAlign = 'center'; 
      var tickFontColor = Chart.helpers.getValueOrDefault(chart.options.scales.xAxes[0].fontColor, Chart.defaults.global.defaultFontColor); 
      chart.chart.ctx.fillStyle = tickFontColor; 

      var meta = chart.getDatasetMeta(0); 
      var xScale = chart.scales[meta.xAxisID]; 
      var yScale = chart.scales[meta.yAxisID]; 

      chart.config.data.labels.forEach(function (label, i) { 
       label.split('\n').forEach(function (line, j) { 
        chart.chart.ctx.fillText(line, xScale.getPixelForTick(i + 0.5), (chart.options.scales.xAxes[0].ticks.padding || 0) + yScale.getPixelForValue(yScale.min) + 
         // move j lines down 
         j * (chart.hasWrappedTicks.tickFontSize + 2)); 
       }); 
      }); 

      chart.chart.ctx.restore(); 
     } 
    } 
}); 

ve

... 
data: { 
    labels: ["January\nFirst Month\nJellyfish\n30 of them", "February\nSecond Month\nFoxes\n20 of them", "March\nThird Month\nMosquitoes\nNone of them", "April", "May", "June", "July"], 
     ... 

Not - bir hattın maksimum içerik kene arasına uyacak varsayılmaktadır (diğer bir deyişle rotasyon mantığına gerek yoktur. Dönüş mantığını da dahil etmenin mümkün olduğuna eminim, ancak biraz daha karmaşık olabilirdi)

Araç ipuçlarını x ekseni etiketini göstermeyecek şekilde biçimlendirmeniz veya etiketin daha kısa bir sürümünü göstermek için biçimlendirmeniz gerekir.

---

Fiddle - http://jsfiddle.net/m0q03wpy/

Answer 2

Chart.js v2.1.5 (v2.5.0 radar grafikler için bu giderir) iç içe diziler kullanılarak çok satırlı etiketler için izin verir: Ancak

... 
data: { 
    labels: [["Jake", "Active: 2 hrs", "Score: 1", "Expected: 127", "Attempts: 4"], 
      ["Matt", "Active: 2 hrs", "Score: 4", "Expected: 36", "Attempts: 4"]], 
    ... 

, bu Bu, etiket değerlerini önceden hesaplamanız gerektiği anlamına gelir.