如何使用ChartJS在水平条形图上绘制垂直线？-Java 学习之路

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

没有“垂直折线图”选项，例如有“水平条形图”选项 . 如何将水平条形图与垂直线组合？

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

enter image description here

2 回答

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

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

回复于 2024-05-03T12:23:00+08:00

你试过这个吗？它是一条带有垂直条形图的水平线 - 所以与你的情况相反 . 但也许你可以从中得到一些有用的东西：

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?

回复于 2024-05-03T12:23:00+08:00

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

2 回答

相关问题