chartjs 有大量数据的问题

Question

我的图表 js 代码如下所示：

var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
    var userDataList = JSON.parse('[[1000000, 0, 0, 0, 0, 0, 0], ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')

    var data = {
        labels: userLowerList,
        datasets: [{
            label: "Credit",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            data: userDataList[0],
        },{
            label: "Debit",
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 2,
            data: [-65, -59, -20],
        }, 
        ]
    };

    var myBarChart = new Chart($("#myChart"), {
        type: 'bar',
        data: data,
        maintainAspectRatio: false,
            options: {
                scales: {
                    yAxes: [{
                        stacked: true,
                        id: 'first-y-axis',
                        position: 'left',
                        ticks: {
                            suggestedMin: 2,
                            callback: function (label, index, labels) {
                                return label;
                            }
                        }
                    }],
                    xAxes: [{
                        barThickness: 20,
                        maxBarThickness: 20,
                        stacked: true
                    }]
                }
            }
    });

在此之后我得到如下结果：

enter image description here

为什么它没有在图表中显示其他值。如果我使用小的值，它工作正常。它不适用于大数据，任何人都可以帮我解决这个问题

Answer 1

您的代码没有任何问题。它只是一个规模问题。我调整了你的 yAxis。它需要更多的工作，因为你有负值并且 log(0) 是未定义的。

var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
var userDataList = JSON.parse('[[10000000, 10, 0, 0, 0, 0, 0],  ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')

var data = {
  labels: userLowerList,
  datasets: [{
    label: "Credit",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    data: userDataList[0],
  }, {
    label: "Debit",
    backgroundColor: "rgba(54, 162, 235, 0.2)",
    borderColor: "rgb(54, 162, 235)",
    borderWidth: 2,
    data: [-65, -59, -20],
  }, ]
};

var myBarChart = new Chart($("#chartJSContainer"), {
  type: 'bar',
  data: data,
  maintainAspectRatio: false,
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        id: 'first-y-axis',
        position: 'left',
        type: 'logarithmic',
        ticks: {
          callback: function(value, index, values) {
            if (value === 1000000) return "1M";
            if (value === 100000) return "100K";
            if (value === 10000) return "10K";
            if (value === 1000) return "1K";
            if (value === 100) return "100";
            if (value === 10) return "10";
            if (value === 0) return "0";
            return null;
          }

        }
      }],
      xAxes: [{
        barThickness: 20,
        maxBarThickness: 20,
        stacked: true
      }]
    }
  }
});

https://jsfiddle.net/0pL9zjd5/

Answer 2

您的程序是正确的，两条曲线之间存在比例问题，

当您对第一个数据使用高值时，第二个数据非常小，因此条形图只有一个或零像素，因此第二个条形图的数据不可见。

我建议你像这个示例2 axix Y 那样创建第二个 y 轴

如果您添加另一个 y 轴，则无法堆叠值，或者您必须将第一个图的值调整为第二个图。..

如果数值相差较大，可以修改坐标轴类型、对数等，阅读文档，或查看答案@quentinroger

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'bar',
      barThickness: 30,
      label: 'Credit',
      backgroundColor: "green",
      yAxisID: 'A',
      data: [1500000, 0, 1000, 81, 56, 85, 40],
    }, {
      type: 'bar',
      label: 'Debit',
      backgroundColor: "red",
      yAxisID: 'B',
      data: [-65, 0, -80, -81, -56, -85, -40]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
          id: 'A',
          stacked: true,
          type: 'logarithmic',
          ticks: {
            max: 10000000,
            callback: function(value, index, values) {
              if (value === 10000000) return "10M";
              if (value === 1000000) return "1M";
              if (value === 100000) return "100K";
              if (value === 10000) return "10K";
              if (value === 1000) return "1K";
              if (value === 100) return "100";
              if (value === 10) return "10";
              if (value === 0) return "0";
              return null;
            }

          }
        },
        {
          id: 'B',
          position: 'right',
          stacked: true,
          max: 0,
          beginAtZero: true
        }
      ]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>