Как нарисовать основу для гистограммы в chart.js

Question

у меня есть гистограмму, как этот

мне нужно нарисовать Горизонтальная пунктирная линия выглядит ниже

Я используя диаграмму js для создания этого графика. Пожалуйста, помогите мне нарисовать эту базовую линию.

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

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["25", "60", "15", "30"], 
     datasets: [{ 
      data: [25, 60, 15, 30], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)' 
      ] 
     }] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
         gridLines: { 
          display:false 
         }, 
         barThickness:40 
        }], 
      yAxes: [{ 
         gridLines: { 
          display:false 
         } 
        }] 

     } 
    } 
}); 

Answer 1

Попробуйте вот так.

Chart.js имеет смешанную схему.

Docs: http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types

var ctx = document.getElementById("myChart").getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: ['25', '60', '45'], 
 
     datasets: [ 
 
      
 
      { 
 
       type: 'line', 
 
       label: 'Baseline', 
 
       data: [15, 15, 15 ] 
 
       
 
      }, 
 
      { 
 
       type: 'bar', 
 
       label: 'Marks', 
 
       data: [25, 60, 45], 
 
       backgroundColor: [ 
 
       'rgba(255, 99, 132, 1)', 
 
       'rgba(54, 162, 235, 1)', 
 
       'rgba(255, 206, 86, 1)' 
 
      ] 
 
      } 
 
      
 
     ] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
    } 
 
} 
 
});

.container { 
 
    width: 80%; 
 
    margin: 15px auto; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div> 
 
    <canvas id="myChart"></canvas> 
 
    </div> 
 
</div>

Answer 2

Здесь мы использовали horizonalLinePlugin и зарегистрировать его с Chart pluginService. вы можете использовать horizontalLine в качестве атрибута option в config. Используйте этот fiddle

JS

var config = { 
       type: 'bar', 
       data: { 
        labels: ["25", "60", "15", "30"], 
        datasets: [{ 
         data: [25, 60, 15, 30], 
         backgroundColor: [ 
          'rgba(255, 99, 132, 1)', 
          'rgba(54, 162, 235, 1)', 
          'rgba(255, 206, 86, 1)', 
          'rgba(75, 192, 192, 1)' 
         ] 
        }] 
       }, 
       options: { 
        scales: { 
         xAxes: [{ 
          gridLines: { 
           display: true 
          }, 
          barThickness: 40, 
          stacked: true 

         }], 
         yAxes: [{ 
          gridLines: { 
           display: true 
          }, 
          stacked: true 

         }] 

        }, 
        horizontalLine: [{ 
         y: 50, 
         style: "rgba(255, 0, 0, .4)", 
         text: "max" 
        }, { 
         y: 15, 
         text: "min" 
        }] 
       } 
      }; 

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

      var horizonalLinePlugin = { 
       afterDraw: function (chartInstance) { 
        var yScale = chartInstance.scales["y-axis-0"]; 
        var canvas = chartInstance.chart; 
        var ctx = canvas.ctx; 
        var index; 
        var line; 
        var style; 

        if (chartInstance.options.horizontalLine) { 
         for (index = 0; index < chartInstance.options.horizontalLine.length; index++) { 
          line = chartInstance.options.horizontalLine[index]; 

          if (!line.style) { 
           style = "rgba(169,169,169, .6)"; 
          } else { 
           style = line.style; 
          } 

          if (line.y) { 
           yValue = yScale.getPixelForValue(line.y); 
          } else { 
           yValue = 0; 
          } 

          ctx.lineWidth = 3; 

          if (yValue) { 
           ctx.beginPath(); 
           ctx.moveTo(0, yValue); 
           ctx.lineTo(canvas.width, yValue); 
           ctx.strokeStyle = style; 
           ctx.stroke(); 
          } 

          if (line.text) { 
           ctx.fillStyle = style; 
           ctx.fillText(line.text, 0, yValue + ctx.lineWidth); 
          } 
         } 
         return; 
        }; 
       } 
      }; 
      Chart.pluginService.register(horizonalLinePlugin); 

      var myChart = new Chart(ctx, config);