Charts.js Legende mehr als Ansicht Wert

Ich benutze charts.js 2.5 und ich sehe keine Option, die Legenden Wert mehr als meine Datenwert ändern.Charts.js Legende mehr als Ansicht Wert

Im Beispiel in der Legende Höhen ist Wert 6, weil mein Datumswert 6 ist. Ich weiß, dass ist Option "max", aber ich möchte nicht manuell verwenden, weil mein Skript generiert wird. Wie kann ich der Bereichslegende in meinem Diagramm automatisch hinzufügen?

Chart.plugins.register({ 
 
    afterDatasetsDraw: function(chartInstance, easing) { 
 
     // To only draw at the end of animation, check for easing === 1 
 
     var ctx = chartInstance.chart.ctx; 
 

 
     chartInstance.data.datasets.forEach(function (dataset, i) { 
 
      var meta = chartInstance.getDatasetMeta(i); 
 
      if (!meta.hidden) { 
 
       meta.data.forEach(function(element, index) { 
 
        if(dataset.data[index] !== undefined) { 
 
         // Draw the text in black, with the specified font 
 
         ctx.fillStyle = 'rgb(0, 0, 0)'; 
 

 
         var fontSize = 8; 
 
         var fontStyle = 'normal'; 
 
         var fontFamily = 'Helvetica Neue'; 
 
         ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 
 

 
         // Just naively convert to string for now 
 
         var dataString = dataset.data[index].toString(); 
 

 
         // Make sure alignment settings are correct 
 
         ctx.textAlign = 'center'; 
 
         ctx.textBaseline = 'middle'; 
 

 
         var padding = 5; 
 
         var position = element.tooltipPosition(); 
 
         ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding); 
 
        } 
 
       }); 
 
      } 
 
     }); 
 
    } 
 
}); 
 
var barChartData = { 
 
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
 
    datasets: [{ 
 
     label: "UC:NC ratio", 
 
     type:'line', 
 
     data: [6,6,6,6,6,6,6,6,0,0,0,0], 
 
     fill: false, 
 
     borderColor: '#0279cb', 
 
     backgroundColor: '#0279cb', 
 
     pointBorderColor: '#0279cb', 
 
     pointBackgroundColor: '#0279cb', 
 
     borderDash: [20, 30], 
 
     yAxisID: 'y-axis-1' 
 
    }, 
 
    { 
 
     label: "UC:NC ratio YTD", 
 
     type:'line', 
 
     data: [6,6,6,6,6,6,6,6,0,0,0,0], 
 
     fill: false, 
 
     borderColor: '#000000', 
 
     backgroundColor: '#000000', 
 
     pointBorderColor: '#000000', 
 
     pointBackgroundColor: '#000000', 
 
     yAxisID: 'y-axis-1' 
 
    }] 
 
}; 
 

 
window.onload = function() { 
 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 
    window.myBar = new Chart(ctx, { 
 
     showTooltips: false, 
 
     type: 'bar', 
 
     data: barChartData, 
 
     animation: false, 
 
     options: { 
 
      responsive: true, 
 
      legend: { 
 
       display: true, 
 
       position: 'bottom' 
 
      }, 
 
      tooltips: false, 
 
      elements: { 
 
       line: { 
 
        fill: false 
 
       } 
 
      }, 
 
      scales: { 
 
       xAxes: [{ 
 
        display: true, 
 
        gridLines: { 
 
         display: false 
 
        }, 
 
        labels: { 
 
         show: true, 
 
        } 
 
       }], 
 
       yAxes: [{ 
 
        type: "linear", 
 
        display: true, 
 
        stacked: false, 
 
        position: "left", 
 
        id: "y-axis-1", 
 
        gridLines:{ 
 
         display: false 
 
        }, 
 
        labels: { 
 
         show:true, 
 

 
        } 
 
       }] 
 
      } 
 
     } 
 
    }); 
 
};

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <script data-require="jquery" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
</head> 
 
<body style="background:#FFF;"> 
 
    <div style="width:700px;"> 
 
     <canvas id="canvas"></canvas> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-03-22 Piotr Kazuś

Ich glaube, was Sie suchen ist ticks:{max:x}. Fügen Sie es zu Ihrer yAxes Skala hinzu.

var chartInstance = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        max: 5, 
        min: 0, 
        stepSize: 0.5 
       } 
      }] 
     } 
    } 
});

Edit: Wenn Sie einen dynamischen Maximalwert mögen, können Sie den größten Wert Ihres Datensatz bestimmen könnten, eine ganze Reihe Prozentsatz darüber und stellen das Maximum der y-Achse auf diesen Wert finden.

var data = [1, 2, 3]; 
var newmax = Math.max(...data); 
newmax = Math.round(newmax*1.2);

Und dann stellen Sie die Zecken max gleich newmax:

ticks:{max:newmax}.

Quelle

2017-03-22 13:02:18

Wenn i max verwenden dann muss ich manuell max-Wert im Code schreiben. Ich möchte den Bereich automatisch ändern. Ich nehme Daten von xls und meine Daten sind unterschiedlich. Und ich will mehr, dass mein Datenwert nicht weniger ist. –

Legen Sie dann fest, dass der Höchstwert einer neuen Variablen entspricht, die Sie aus Ihrem Datensatz ermitteln, z. B. 20% größer als der größte Wert. Z.B. 'var arr = [1, 2, 3]; var max = Math.max (... arr); max = Math.round (max * 1,2);' Und dann setze die Ticks max gleich 'var max': 'Ticks: {max: max}'. –

Das suche ich! Vielen Dank :) –

Charts.js Legende mehr als Ansicht Wert

Antwort

Verwandte Themen