Chart.js - zeichne horizontale Linie in Balkendiagramm (Typ bar)

Guten Abend, ich möchte eine horizontale Linie auf einem Diagramm zeichnen Balkendiagramm mit Chart.js.Chart.js - zeichne horizontale Linie in Balkendiagramm (Typ bar)

Ich lese die Frage Chart.js - draw horizontal line und ich konnte nicht die Linie auf einem Balkendiagramm zeichnen, wie angegeben ist die Implementierung für Liniendiagramm.

ist mein Code zu jsfiddle implementiert

HTML

<div> 
    <canvas id="ctx"></canvas> 
</div>

var data = { 
    labels: ["Docente 1", "Docente 2", "Docente 3", "Docente 4", "Docente 5", "Docente 6", "Docente 7"], 
    datasets: [ 
     { 
      label: "Semestre 2017-I", 
      borderWidth: 1, 
      data: [3.65, 2.59, 1.80, 2.81, 0.56, 0.55, 3.40] 
     } 
    ] 
};    

var ctx = document.getElementById("ctx"); 

var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data 
});

und es wäre in der Lage, die horizontale Linie zu zeichnen, eine grafische Darstellung der Form zu erhalten: http://i.stack.imgur.com/QlOKG.png

Quelle

2016-07-25 HenRogTR

Dies könnte helfen http://stackoverflow.com/questions/25811425/chart-js-how-to-get-combined-bar-and-line-charts & http://jsfiddle.net/7a4hhzge/ 4/& http://plnkr.co/edit/TvY5tz?p=preview – Lucky

Mein Fall unterscheidet sich von dem oben genannten, ich möchte, dass die Zeile horizontal ist. Die Antwort ist http://stackoverflow.com/a/38568203/3814222 – HenRogTR

Ja, ich dachte, das würde dir helfen. Wie auch immer, Ihre angenommene Antwort hat einen ähnlichen Code wie der oben beschriebene jfiddle Link. Und der Unterschied zwischen einer horizontalen und einer gekrümmten Linie hängt von den Daten ab, die Sie übergeben. – Lucky

HTML:

<div> 
    <canvas id="ctx" width="600" height="400"></canvas> 
</div>

JS:

var data = { 
       labels: ["Docente 1", "Docente 2", "Docente 3", "Docente 4", "Docente 5", "Docente 6", "Docente 7"], 
       datasets: [ 
        { 
         label: "Semestre 2017-I", 
         borderWidth: 1, 
         data: [3.65, 2.59, 1.80, 2.81, 0.56, 0.55, 3.40] 
        } 
       ] 
      };    

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

Chart.types.Bar.extend({ 
    name: "BarWithLine", 
    initialize: function() { 
     Chart.types.Bar.prototype.initialize.apply(this, arguments); 
    }, 
    draw: function() { 
     Chart.types.Bar.prototype.draw.apply(this, arguments); 

     var lineHeight = 2; // <---- 

     // draw line 
     this.chart.ctx.beginPath(); 
     this.chart.ctx.moveTo(0, this.scale.calculateY(lineHeight)); 
     this.chart.ctx.strokeStyle = '#ff0000'; 
     this.chart.ctx.lineTo(this.chart.width, this.scale.calculateY(lineHeight)); 
     this.chart.ctx.stroke(); 
    } 
}); 

var myBarChart = new Chart(ctx).BarWithLine(data, { 
    type: 'bar', 
    data: data 
});

Hier ist die Geige: http://jsfiddle.net/zk9oc4c9/

Wichtig: Ich habe die Chart.js Bibliothek URL: http://www.chartjs.org/assets/Chart.min.js

Und entfernte https von der Fidd le.

Quelle

2016-07-25 12:46:50 Daniel

Chart.js - zeichne horizontale Linie in Balkendiagramm (Typ bar)

Antwort

Verwandte Themen