如何使用ChartJS在水平条形图上绘制垂直线？ [英] How do I draw a vertical line on a horizontal bar chart with ChartJS?

问题描述

有很多示例将图表扩展为包括水平和垂直的线。但是，我还没有找到一个方法用水平条形图绘制一条垂直线。

1. 解决方案

   ChartJS支持自定义插件。创建一个插件，它将从图表选项中读取一个新属性，并在指定的索引处绘制一行。

   
   
   

   在Plunkr上查看

   
   
   

     //创建插件var originalLineDraw = Chart.controllers.horizo​​ntalBar.prototype.draw; Chart.helpers.extend（Chart.controllers.horizo​​ntalBar.prototype，{draw：function（）{originalLineDraw.apply（this，arguments）; var chart = this.chart; var ctx = chart.chart.ctx; var index = chart .config.options.lineAtIndex; if（index）{var xaxis = chart.scales ['x-axis-0']; var yaxis = chart.scales ['y-axis-0']; var x1 = xaxis.getPixelForValue （index）; var y1 = yaxis.top; var x2 = xaxis.getPixelForValue（index）; var y2 = yaxis.bottom; ctx.save（）; ctx.beginPath（）; ctx.moveTo（x1，y1）; ctx .strokeStyle ='red'; ctx.lineTo（x2，y2）; ctx.stroke（）; ctx.restore（）;}}}）; //设置图表数据var data = {labels：[January ，February，March，April，May，June，July]，datasets：[{label：My First dataset，backgroundColor：['rgba（255， 0.2）'，'rgba（75,182,192,0.2）'，'rgba（54,162,235,0.2）'，'rgba（255,206,86,0.2）'，'rgba 255，0.2）'，'rgba（255,159,64,0.2）']，borderColor：['rgba（255,99,132,1）'，'rgba（54,162,235,1）'，'rgba 255，206，86，1）'，'rgba（75,192,192,1）'，'rgba（153,102,255,1）'，'rgba（255,159,64,1} borderWidth：1，data：[65，59，80，81，56，55，40]，}]}; // Load Chart var ctx = $（＃myChart）; var myBarChart = new Chart（ctx，{type：'horizo​​ntalBar'，data：data，options：{//设置要绘制线的值的索引lineAtIndex：60，legend：{display：false}}} ）;  

    < canvas id =myChart> < / canvas> < script src =https://code.jquery.com/jquery-2.2.4.min.jsintegrity =sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =crossorigin =anonymous>< / script> < script src ='https：//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js'>< / script> < script src =horizo​​ntalBarPlugin.js>< / script> < script src =buildChart.js>< / script>  

   
   

   There are many examples of extending a Chart to include a line, both horizontal and vertical. However, I have not found a way to draw a vertical line with a horizontal bar chart.

   1. Horizontal line on horizontal line chart
   2. Vertical line on horizontal line chart
   3. Horizontal line on vertical bar chart

   There is not a "vertical line chart" option like there is a "horizontal bar chart" option. How do I combine a horizontal bar chart with a vertical line?

   Chart.js documentation

   The result would have a bar dataset and a line dataset that can be used on the same chart using the same axis like below:

   解决方案

   ChartJS supports custom plugins. Create a plug in that will read a new property from the chart options and draw the line at the specified index.

   See it on Plunkr

    //Create the plug in
     var originalLineDraw = Chart.controllers.horizontalBar.prototype.draw;
     Chart.helpers.extend(Chart.controllers.horizontalBar.prototype, {
     
         draw: function () {
             originalLineDraw.apply(this, arguments);
     
             var chart = this.chart;
             var ctx = chart.chart.ctx;
     
             var index = chart.config.options.lineAtIndex;
             if (index) {
     
                 var xaxis = chart.scales['x-axis-0'];
                 var yaxis = chart.scales['y-axis-0'];
     
                 var x1 = xaxis.getPixelForValue(index);                       
                 var y1 = yaxis.top;                                                   
     
                 var x2 = xaxis.getPixelForValue(index);                       
                 var y2 = yaxis.bottom;                                        
     
                 ctx.save();
                 ctx.beginPath();
                 ctx.moveTo(x1, y1);
                 ctx.strokeStyle = 'red';
                 ctx.lineTo(x2, y2);
                 ctx.stroke();
     
                 ctx.restore();
             }
         }
     });
   
   //Set up the chart data
     var data = {
         labels: ["January", "February", "March", "April", "May", "June", "July"],
         datasets: [
             {
                 label: "My First dataset",
                 backgroundColor: [
                     'rgba(255, 99, 132, 0.2)',
                     'rgba(54, 162, 235, 0.2)',
                     'rgba(255, 206, 86, 0.2)',
                     'rgba(75, 192, 192, 0.2)',
                     'rgba(153, 102, 255, 0.2)',
                     'rgba(255, 159, 64, 0.2)'
                 ],
                 borderColor: [
                     'rgba(255,99,132,1)',
                     'rgba(54, 162, 235, 1)',
                     'rgba(255, 206, 86, 1)',
                     'rgba(75, 192, 192, 1)',
                     'rgba(153, 102, 255, 1)',
                     'rgba(255, 159, 64, 1)'
                 ],
                 borderWidth: 1,
                 data: [65, 59, 80, 81, 56, 55, 40],
             }
         ]
     };
   
     //Load Chart
     var ctx = $("#myChart");
     var myBarChart = new Chart(ctx, {
         type: 'horizontalBar',
         data: data,
         options: {
             //Set the index of the value where you want to draw the line
             lineAtIndex: 60,
             legend: {
               display: false
             }
         }
     });

       <canvas id="myChart"></canvas>
   
       <script   src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
       <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js'></script>
   
       <script src="horizontalBarPlugin.js"></script>
       <script src="buildChart.js"></script>

   这篇关于如何使用ChartJS在水平条形图上绘制垂直线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！