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

2022-01-22 00:00:00 charts javascript html chart.js

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

  1. 解决方案

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

    在 Plunkr 上查看

    //创建插件var originalLineDraw = Chart.controllers.horizo​​ntalBar.prototype.draw;Chart.helpers.extend(Chart.controllers.horizo​​ntalBar.prototype, {画:函数(){originalLineDraw.apply(this, arguments);var 图表 = this.chart;var ctx = 图表.chart.ctx;var index = chart.config.options.lineAtIndex;如果(索引){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 = '红色';ctx.lineTo(x2, y2);ctx.stroke();ctx.restore();}}});//设置图表数据变量数据 = {标签:[一月",二月",三月",四月",五月",六月",七月"],数据集:[{标签:我的第一个数据集",背景颜色: ['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)'],边框颜色: ['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)'],边框宽度:1,数据:[65、59、80、81、56、55、40],}]};//加载图表var ctx = $("#myChart");var myBarChart = new Chart(ctx, {类型:'水平条',数据:数据,选项: {//设置要画线的值的索引lineAtIndex:60,传奇: {显示:假}}});

     <canvas id="myChart"></canvas><script src="https://code.jquery.com/jquery-2.2.4.min.js" 完整性="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>

相关文章