2016-07-25 2 views
1

Добрый вечер, я хочу нарисовать горизонтальную линию на диаграмме диаграммы графика, используя Chart.js.Chart.js - рисовать горизонтальную линию в столбчатой ​​диаграмме (тип bar)

Я прочитал вопрос Chart.js - draw horizontal line, и я не смог нарисовать линию на диаграмме, как указано в реализации для линейной диаграммы.

Мой код реализован на jsfiddle

HTML

<div> 
    <canvas id="ctx"></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"); 

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

и он сможет нарисовать горизонтальную линию, получая график вида: http://i.stack.imgur.com/QlOKG.png

+0

Возможно, это может быть помощь 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

+0

Мой случай отличается от предыдущего, я хочу, чтобы линия была горизонтальной. Ответ на это http://stackoverflow.com/a/38568203/3814222 – HenRogTR

+0

Да, я думал, это поможет вам. Во всяком случае, ваш принятый ответ имеет похожий код на ссылку jsfiddle, опубликованную выше. И разница между горизонтальной и криволинейной строкой зависит от данных, которые вы передаете. – Lucky

ответ

2

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

Вот скрипка: http://jsfiddle.net/zk9oc4c9/

Важно: Я изменил библиотеку URL Chart.js на: http://www.chartjs.org/assets/Chart.min.js

И удалил https с fidd ле.