Chart.js条形图和折线图

2 回答

• 0

  我通过扩展Chartjs来解决这个问题 .

  var originalLineDraw = Chart.controllers.bar.prototype.draw;
  Chart.helpers.extend(Chart.controllers.bar.prototype, {
    draw: function() {
      originalLineDraw.apply(this, arguments);
  
      var chart = this.chart;
      var ctx = chart.chart.ctx;
  
      var index = chart.config.data.lineAtIndex;
      if (index) {
        var xaxis = chart.scales['x-axis-0'];
        var yaxis = chart.scales['y-axis-0'];
  
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(xaxis.getPixelForValue(undefined, 0), yaxis.getPixelForValue(70));
        ctx.strokeStyle = '#000000';
        ctx.lineTo(xaxis.getPixelForValue(undefined, 7), yaxis.getPixelForValue(10));
        ctx.stroke();
        ctx.restore();
      }
    }
  });
  
  var config = {
    type: 'bar',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        data: [65, 0, 80, 81, 56, 85, 40],
        fill: false
      }],
      lineAtIndex: 2
    }
  };
  
  var ctx = document.getElementById("myChart").getContext("2d");
  new Chart(ctx, config);
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <canvas id="myChart"></canvas>
  

  回复于 2024-04-19T19:08:49+08:00
• 3

  https://jsfiddle.net/fgx92Lm5/

  该行的数据应为：

  data: [2800,2680,2565,2450,2335,2220,2105,1990,1875,1760,1645,1530,1415,1300]
  

  换句话说，您需要根据终点计算其他值，并根据条形数计算得到一条线 .

  delta =（2800 - 1300）/ 13 = ~115

  回复于 2024-04-19T19:08:49+08:00