Chartjs ist ein ziemlich ausgezeichnetes Open Source Werkzeug, aber hatte eine schnelle Frage über ein Balkendiagramm, das ich versuche zu schaffen. In Anbetracht dieser Diagrammdaten:chartjs: wie man benutzerdefinierte Skala im Balkendiagramm einstellt

var chartData = { 
     labels : labels, 
     datasets :[ 
      { 
       fillColor : "rgba(220,220,220,0.5)", 
       strokeColor : "rgba(220,220,220,0.8)", 
       highlightFill: "rgba(220,220,220,0.75)", 
       highlightStroke: "rgba(220,220,220,1)", 
       scaleOverride: true, 
       scaleSteps: 9, 
       data : values 
      } 
     ] 
    }

ich gehofft hatte, dass das Diagramm mit Top-Wert von 10 ziehen würde, ob es irgendwelche Werte von 10 waren ich die scaleOverride dachte und scaleSteps würde das erreichen.

Ist es möglich, diese Ausgabe zu bekommen? Ich ging durch die Dokumente und sah keine anderen offensichtlichen Optionen.

Aktualisieren

habe es zur Arbeit gebracht. Mein Origin-Post enthielt die JavaScript-Funktion nicht am unteren Rand.

<div class="barChartTest" id="rating_12229" onload="drawChart();"> 
<input type="hidden" class="rating-component" comp-name="test1" comp-value="6"/> 
<input type="hidden" class="rating-component" comp-name="test2" comp-value="7"/> 
<input type="hidden" class="rating-component" comp-name="test3" comp-value="6"/> 
<input type="hidden" class="rating-component" comp-name="test4" comp-value="5"/> 
<input type="hidden" class="rating-component" comp-name="test5" comp-value="1"/> 
</div> 
<canvas id="rating_12229" width="50" height="20"></canvas>

und hier ist mein javascript:

function buildRatingChartData(ratingId){ 
    var comps = document.getElementById(ratingId).getElementsByClassName("rating-component"); 
    var labels = []; 
    var values = []; 

    for(var i=0; i<comps.length; i++){ 

      labels.push(comps[i].getAttribute("comp-name")); 
      values.push(comps[i].getAttribute("comp-value")); 
    } 

    var chartData = { 
     labels : labels, 
     datasets :[ 
      { 
       scale: 10, 
       fillColor : "rgba(220,220,220,0.5)", 
       strokeColor : "rgba(220,220,220,0.8)", 
       highlightFill: "rgba(220,220,220,0.75)", 
       highlightStroke: "rgba(220,220,220,1)", 
       scaleOverride:true, 
       scaleSteps:9, 
       scaleStartValue:0, 
       scaleStepWidth:1, 
       data : values 
      } 
     ] 
    } 

    return chartData; 

}

hier war, wo ich diese Optionen hinzugefügt und bekam die Ausgabe Ich wollte:

function drawCharts(){ 
    var ratings = document.getElementsByClassName("brewRatingData"); 
    for(var i=0; i<ratings.length; i++){ 

     var ratingId = ratings[i].getAttribute("id"); 
     var canvasId = ratingId.replace("brewRating", "coffeeBarChart"); 

     var brewChartData = buildRatingChartData(ratingId); 
     var ctx = document.getElementById(canvasId).getContext("2d"); 
     window.myBar = new Chart(ctx).Bar(brewChartData, { 
     responsive : true, 
      scaleOverride:true, 
      scaleSteps:10, 
      scaleStartValue:0, 
      scaleStepWidth:1, 
     }); 

    } 
}

Quelle

2015-07-26 badperson

Sie sollten Zedfoxus Antwort akzeptieren, wenn es Ihre Frage beantwortet (was es wirklich scheint)! – Brendan

Ich wollte, aber ich muss versuchen, das Problem neu zu erstellen und dann aktualisieren Sie die HTML ... wird versuchen, das später heute Nacht zu tun – badperson

@brendan, siehe aktualisiert html/javascript. Vielen Dank! – badperson

Auch sind scaleStartValue und scaleStepWidth wie in docs angegeben .

Beispiel

diesem Beispiel wird ein Balkendiagramm mit der Y-Achse bei 0 beginnt und bei 900 endet Um das zu tun, wird der Schritt Breite auf 100 und die Anzahl der Schritte festgelegt werden auf 9.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
    <body> 
     <canvas id="income" width="600" height="400"></canvas> 
    </body> 
</html>

var barData = { 
    labels : ["January","February","March","April","May","June"], 
    datasets : [ 
     { 
      fillColor : "#48A497", 
      strokeColor : "#48A4D1", 
      data : [456,479,324,569,702,600] 
     }, 
     { 
      fillColor : "rgba(73,188,170,0.4)", 
      strokeColor : "rgba(72,174,209,0.4)", 
      data : [364,504,605,400,345,320] 
     } 

    ] 
}; 

var income = document.getElementById("income").getContext("2d"); 

new Chart(income).Bar(barData, { 
    animation:false, 
    scaleOverride:true, 
    scaleSteps:9, 
    scaleStartValue:0, 
    scaleStepWidth:100 
});

Quelle

2015-07-26 03:34:27 zedfoxus

Sie haben mich dazu geschlagen ... gute Arbeit. – StillLearnin

hinzugefügt diese Werte, aber immer noch die gleiche Ausgabe – badperson

Können Sie Ihre Frage mit Ihrem HTML aktualisieren, und Ausgabe von 'values' Variable? Wenn wir die Daten haben, die Sie verwenden, können wir eine Lösung schneller anbieten – zedfoxus

var myChart = new Chart(ctx, { 
       type: 'bar', 
       data:data, 
       options: { 
        responsive: true, 
        scales: { 
         yAxes: [{ 
          ticks: { 
           beginAtZero: true, 
           steps: 10, 
           stepValue: 6, 
           max: 60 //max value for the chart is 60 
           } 
          } 
         }] 
        } 
       } 
      });

Quelle

2017-03-29 18:15:08

chartjs: wie man benutzerdefinierte Skala im Balkendiagramm einstellt

Aktualisieren

Antwort

Verwandte Themen