Chart.js - 在条形图（类型栏）中绘制水平线

晚上好，我想使用Chart.js在图形条形图上绘制水平线。Chart.js - 在条形图（类型栏）中绘制水平线

我读到Chart.js - draw horizontal line的问题，我无法在条形图上画线，如线图所示。

我的代码被实现为jsfiddle

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

，这将是能够绘制水平线，获得具有以下形式的曲线图： http://i.stack.imgur.com/QlOKG.png

来源

2016-07-25 HenRogTR

这可能是帮助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

我的情况与上面不同，我想要的行是水平的。答案是http://stackoverflow.com/a/38568203/3814222 – HenRogTR

是的，我认为这会帮助你。无论如何，你接受的答案有类似于我上面发布的jsfiddle链接的代码。水平线和曲线之间的差异取决于您传递的数据。 – 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 
});

这里是小提琴：http://jsfiddle.net/zk9oc4c9/

重要：我改变了chart.js之库网址： http://www.chartjs.org/assets/Chart.min.js

并从fidd中删除https乐。

来源

2016-07-25 12:46:50 Daniel

Chart.js - 在条形图（类型栏）中绘制水平线

回答

相关问题