Horizontale Balkendiagramm in chart.js

Question

Ich versuche, eine horizontale Balkendiagramm zu zeichnen chart.js mit 2.3.0 -

var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d"); 
    var MeSeData = { 
     labels: [ 
      "ME", 
      "SE" 
     ], 
     datasets: [ 
      { 
       label: "Test", 
       data: [100, 75], 
       backgroundColor: ["#669911", "#119966" ], 
       hoverBackgroundColor: ["#66A2EB", "#FCCE56"] 
      }] 
    }; 

var MeSeChart = new Chart(MeSeContext, { 
    type: 'horizontalBar', 
    data: MeSeData, 
    options: { 
     scales: { 
      yAxes: [{ 
       stacked: true 
      }] 
     } 

    } 
}); 

Aber es zeigt nur eine Bar. Was habe ich hier vermisst?

Answer 1

Sie können nur ein Diagramm anzeigen, da der niedrigste Wert Ihrer Daten (75 hier) das linke Limit der Skala ist.

Wie im folgenden Screenshot Ihres Code-Ergebnisses gezeigt, können Sie, wenn Sie die Maus über die Skala bewegen, die zugehörigen Daten sehen, was bedeutet, dass sie hier sind.

---

Sie haben zwei Möglichkeiten, dieses Problem zu beheben:

• Stellen Sie die min Eigenschaft der xScale Zecken auf den gewünschten Wert (genug, um es natürlich zu sehen):

  var MeSeChart = new Chart(MeSeContext, { 
      type: 'horizontalBar', 
      data: MeSeData, 
      options: { 
       scales: { 
        xAxes: [{ 
         ticks: { 
          min: 60 // Edit the value according to what you need 
         } 
        }], 
        yAxes: [{ 
         stacked: true 
        }] 
       } 
      } 
  }); 
  

  Sie können das Ergebnis mit einemsehenauf 60 on this jsFiddle:

  

• Stellen Sie die beginAtZero Eigenschaft auf true, die die gleiche ist wie Einstellung min-0:

  xAxes: [{ 
      ticks: { 
       beginAtZero: true 
      } 
  }], 
  

  Sie das Ergebnis mit dem Satz beginAtZero Eigenschaft sehen zu trueon this jsFiddle.