Chart.js不能正常工作，当只有1 bar的时候画线

问题描述

我想要执行此图表：

可以看到线条（元和 Rango deaceptación）被绘制为点。我相信这是因为我只有一个酒吧，在另一个图表，我是用2个酒吧，我得到的线条画一条线。

As you can see the lines (Meta and Rango de aceptación) were drawed like a points. I believe this is because I only have one bar and in another charts I was made with 2 bars I get the lines drawed like a line.

这是代码，我做错了什么？

This is the code, what I'm doing wrong?

<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>

我尝试了元和 Rango deaceptación data：

I tryed on Meta and Rango de aceptación data:

data：[100,100,100] 和 data：[90,90， 90]

但结果是意外的：

[

推荐答案

分配您的标签值将开始工作。

Assign your label below value it will start working.

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>

这篇关于Chart.js不能正常工作，当只有1 bar的时候画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！