我想做这个图表:
如您所见,线条(Meta 和Rango de aceptación)被绘制成一个点。我相信这是因为我只有一个条形图,而在另一张图表中我是用 2 个条形图制作的,我把线条画成一条线。
这是代码,我做错了什么?
<canvas id="myChart2016_5857751099b04" width="500" height="500" style="display: block; width: 500px; height: 500px;"></canvas>
<script style="text/javascript">
var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04");
var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, {
type: 'bar',
data: {
labels: ["Año 1"],
datasets: [
{backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)',
type: 'line',
label: 'Meta',
data: [100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)',
type: 'line',
label: 'Rango de aceptación ',
data: [90],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'],
type: 'bar',
label: 'Porcentaje de proveedores evaluados satisfactoriamente ',
data: [100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 } ]},
options: {
tension:1,
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
xAxes: [{
categorySpacing: 20,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}],
yAxes: [{
categorySpacing: 20,
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
我尝试了 Meta 和 Rango de aceptación 数据:
数据:[100,100,100]
和数据:[90,90,90]
但结果出乎意料:
[
最佳答案
将您的标签分配到低于它会开始工作的值。
labels: ["Año 1","",""]
下面是工作示例代码
<script style="text/javascript">
var ctx2016_5857751099b04 = document.getElementById("myChart2016_5857751099b04");
var myChart2016_5857751099b04 = new Chart(ctx2016_5857751099b04, {
type: 'bar',
data: {
labels: ["Año 1","",""],
datasets: [
{backgroundColor:'rgba(36, 143, 36,0)',borderColor:'rgba(75, 172, 198,1)',
type: 'line',
label: 'Meta',
data: [100,100,100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:'rgba(51, 51, 26,0)',borderColor:'rgba(182, 87, 8,1)',
type: 'line',
label: 'Rango de aceptación ',
data: [90,90,90],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, {backgroundColor:['rgba(99, 33, 36 ,0.1)'],borderColor:['rgba(99, 33, 36, 1)'],
type: 'bar',
label: 'Porcentaje de proveedores evaluados satisfactoriamente ',
data: [100],
options: { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 } ]},
options: {
tension:1,
scaleBeginAtZero: true,
scaleStartValue: 0,
scales: {
xAxes: [{
categorySpacing: 20,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
}],
yAxes: [{
categorySpacing: 20,
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
关于html - 当只有 1 条时,Chart.js 无法正常绘制线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41216540/