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

Question

有许多扩展图表以包含水平和垂直线的示例。但是，我还没有找到用水平条形图绘制垂直线的方法。

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

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

Chart.js documentation

结果将有一个条形数据集和一个线形数据集，可以使用相同的轴在同一个图表上使用，如下所示：

Answer 1

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>

Answer 2

你试过了吗？这是一条带有垂直条形图的水平线-因此与您相反。但也许你可以从中得到一些有用的东西：

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?