Question

我使用chart.js构建图表，它是一个带有散点图类型的堆积条形图。我的问题是条形图的x轴上的刻度不能正确表示散点的x轴刻度。我花了几个小时查看文档并浏览SOF并提出This Answer，这对于条形图是有意义的，而不是由x-y坐标绘制的散点图。

＆＃13;

var chartDefault = {
  type: 'bar',
  data: {
    labels: ['30', '45', '60', '90', '120', '120+'],
    datasets: [{
      type: 'bar',
      label: 'Receivable',
      data: [730, 492.5, 120, 4732.5, 2760.85, 0],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }, {
      type: 'bar',
      label: 'Past Due',
      data: [2760.85, 0, 0, 0, 0, 0],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }, {
      type: 'scatter',
      label: 'Invoice',
      data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
      xAxisID: 'invoice-time',
      yAxisID: 'invoice-amount',
      backgroundColor: 'rgba(75, 00, 150, 0.2)',
      borderColor: 'rgba(75, 00, 150,1)',
      borderWidth: 2
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Days'
        },
      }, {
        id: 'invoice-time',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Days'
        },
        ticks: {
          beginAtZero: true,
          stepSize: 1,
          suggestedMax: 125
        }
      }],
      yAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }, {
        id: 'invoice-amount',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }]
    },
  }
};
var chart = new Chart($('#creditSat'), chartDefault);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="creditSat"></canvas>

＆＃13;

因此，如果您查看散点数据集的代码段，则会有11个数据点，但只会映射6个数据点。我希望所有11个都被映射，我知道有一些重叠，这是有道理的。基本上这是发票的表示，您有条形图表示的应收款，过期，然后行上的点代表发票本身。任何帮助将不胜感激。

Answer 1

找到答案，折线图的轴需要指定的类型，如下所示：

{
    id: 'invoice-time',
    type: 'linear',
    display: false,
    stacked: false,
    scaleLabel: {
      display: false,
      labelString: 'Days'
    },
    ticks: {
      beginAtZero: true,
      stepSize: 1,
      suggestedMax: 125
    }
  }

var chartDefault = {
  type: 'bar',
  data: {
    labels: ['30', '45', '60', '90', '120', '120+'],
    datasets: [{
      type: 'bar',
      label: 'Receivable',
      data: [730, 492.5, 120, 4732.5, 2760.85, 0],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }, {
      type: 'bar',
      label: 'Past Due',
      data: [2760.85, 0, 0, 0, 0, 0],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }, {
      type: 'scatter',
      label: 'Invoice',
      data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
      xAxisID: 'invoice-time',
      yAxisID: 'invoice-amount',
      backgroundColor: 'rgba(75, 00, 150, 0.2)',
      borderColor: 'rgba(75, 00, 150,1)',
      borderWidth: 2
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Days'
        },
      }, {
        id: 'invoice-time',
        type: 'linear',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Days'
        },
        ticks: {
          beginAtZero: true,
          stepSize: 1,
          suggestedMax: 125
        }
      }],
      yAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }, {
        id: 'invoice-amount',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }]
    },
  }
};
var chart = new Chart($('#creditSat'), chartDefault);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="creditSat"></canvas>

Chart.js具有不同比例的混合条形图和折线图

1 个答案: