如何使用ChartJS在水平条形图上绘制垂直线？

问题描述：

有很多扩展图表的例子，包括横向和纵向的一行。但是，我还没有找到一种方法来绘制水平条形图的垂直线。如何使用ChartJS在水平条形图上绘制垂直线？

Horizontal line on horizontal line chart
Vertical line on horizontal line chart
Horizontal line on vertical bar chart

没有一个 “垂直线图” 选项一样有一个 “水平条形图” 选项。如何将水平条形图与垂直线结合起来？

Chart.js documentation

结果将有一个酒吧数据集，并可以在同一个图表上使用同一轴上像下面所使用的线数据集：

答

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

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>

这正是我一直在寻找。 –

答

你试过吗？这是一条带有垂直条形图的水平线 - 与您的情况相反。但是，也许你可以从中获得一些有用的东西出来吧：

var chart = c3.generate({ 
bindto: '#chartContainer', 
tooltip: { 
     grouped: false 
    }, 
data: { 

    columns: [ 

     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 130, 340, 200, 500, 250, 350], 
     ['data3', 30, 200, 100, 400, 150, 250], 
     ['data4', 130, 340, 200, 500, 250, 350], 
     ['data5', 130, 340, 200, 500, 250, 350], 
     ['data6', 130, 340, 200, 500, 250, 350], 
     ['data7', 130, 340, 200, 500, 250, 350], 
     ['diif1', null, null, 700 ], 
     ['diif2', null, null, 1200] 
    ], 
    types:{ 
    "data1" :"bar", 
     "data2" :"bar", 
     "data3" :"bar", 
     "data4" :"bar", 
     "data5" :"bar", 
     "data6" :"bar", 
     "data7" :"bar", 
     "diff1" : "line", 
     "diff2" : "line" 

    }, 
    order:null, 
    groups: [ 
     ['data1', 'data2','data3', 'data4'], 
     ['data5', 'data6','data7'] 
    ], 
    onclick: function (d, element) { 
     var name=d.name; 
     drilldown(name); 
    } 

}, 
    grid: { 
     y: { 
     lines:[{value:1400,text:1400}, 
       {value: 1450,text: 1450} 
      ] 
     } 
    } 
}); 


function drilldown(name){ 
alert('Call for ' +name); 
}

http://jsfiddle.net/9nxcfzb9/12/

我在寻找类似的给你，但不与水平条形图的东西，但时间跨度吧，如果你有一个想法，请让我知道： How do I change or add the vertical line on a tooltip of a c3 graph?

如何使用ChartJS在水平条形图上绘制垂直线？

相关推荐