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

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

在此處輸入圖像描述

為什么它沒有在圖表中顯示另一個值。 如果我使用小的值，它工作正常。 它不適用於大數據，任何人都可以幫我解決這個問題

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>