ChartJS Nowe linie '\ n' na osi X Etykiety lub wyświetlanie większej ilości informacji Wokół wykresu lub etykiety narzędzi z ChartJS V2

Question

Używam chart.js (V2), aby spróbować zbudować wykres słupkowy, który ma więcej informacji dostępnych dla użytkownika bez po najechaniu kursorem myszy lub kliknięciu w dowolnym miejscu. Podałem dwa przykłady, jak mam nadzieję edytować mój wykres.

Two edited versions of what I hope to achieve

Jak widać, mam nadzieję na miejsce (gdzieś), kilka dodatkowych informacji poza etykietach. Miałem nadzieję, że przez dodanie „\ n” do etykiet może udało mi się dostać to, czego szukałem podobna do opcji A.

Niektóre zmieniony kod jest cios:

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);    
    }; 

W ten punkt Byłbym zadowolony z posiadania extradata w dowolnym miejscu na pasku. Każda pomoc będzie doceniona. Dzięki ~

Answer 1

Z Chart.js v2.1, można napisać plugin wykresu to zrobić

---

Podgląd

---

Script

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(); 
     } 
    } 
}); 

i

... 
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"], 
     ... 

Uwaga - przewiduje się, że maksymalna zawartość jednej linii pasuje pomiędzy kleszczami (np że nie jest potrzebna żadna logika rotacji. Jestem pewien, że możliwe jest również włączenie logiki rotacji, ale byłoby to nieco bardziej skomplikowane)

Powinieneś sformatować etykiety narzędzi tak, aby nie wyświetlały etykiety osi X lub sformatować ją tak, aby wyświetlały krótszą wersję etykiety.

---

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

Answer 2

Chart.js v2.1.5 pozwala na etykietach multi-line za pomocą zagnieżdżonych tablic (v2.5.0 rozwiązuje go na wykresach radarowych):

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

to jednak oznacza, że ​​będziesz musiał wstępnie obliczyć wartości etykiety.