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

6ie5vjzr 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(73)

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

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);

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

因此，如果您查看散点数据集的片段，则有11个数据点，但只有6个被Map。我希望所有11个被Map，我知道有一些重叠，这是有道理的。本质上，这是发票的表示，你有一个由条形表示的过期，然后线上的点代表发票本身。如果你能帮忙的话，我将不胜感激。

jquery

来源：https://stackoverflow.com/questions/45244799/chart-js-mixed-bar-and-line-chart-with-different-scales

2条答案

按热度按时间

ql3eal8s1#

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

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

赞(0）回复(0）举报 2023-10-17

ssgvzors2#

目前接受的答案不是在Chart.js的新版本中这样做的正确方法。下面是文档中的示例代码来实现这一点：

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',

            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }
        }
    }
});

来源：https://www.chartjs.org/docs/latest/axes/cartesian/#creating-multiple-axes

赞(0）回复(0）举报 2023-10-17

我来回答

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

2条答案

相关问题

热门标签

最新问答