Chartjs标签和数据集的长度不同

Question

如何根据数据集组织数据？

// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [ "Mar",  "Apr", ],
    datasets: [ 
     {
        label: "serj",
        backgroundColor: "#11564D",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}, ],
      }, 
     {
        label: "aisha",
        backgroundColor: "#508D2F",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}, ],
      }, 
     {
        label: "serikzhan",
        backgroundColor: "#3F22F5",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Apr", y: 8000}, ],
      }, 
     ],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'month',
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 6
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 150000,
          maxTicksLimit: 5
        },
        gridLines: {
          display: true
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

自动创建的所有数据集和标签。问题是所有数据都从3月开始，与x轴无关。不同的用户具有不同月份的数据。我们是否只能通过chartjs api解决问题？

Answer 1

您的方法几乎可以。唯一需要更改的是删除data.labels并按以下方式定义xAxis：

xAxes: [{
  offset: true,
  type: 'time',
  time: {
    parser: 'MMM',
    unit: 'month',
    displayFormats: {
      month: 'MMM'
    }
  },

[请注意，Chart.js使用Moment.js来实现时间轴。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [ 
     {
        label: "serj",
        backgroundColor: "#11564D",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 128400}, {x: "Apr", y: 53500}]
      }, 
     {
        label: "aisha",
        backgroundColor: "#508D2F",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Mar", y: 58500}, {x: "Apr", y: 12000}]
      }, 
     {
        label: "serikzhan",
        backgroundColor: "#3F22F5",
        borderColor: "rgba(2,117,216,1)",
        data: [{x: "Apr", y: 8000}]
      }
     ]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true,
        type: 'time',
        time: {
          parser: 'MMM',
          unit: 'month',
          displayFormats: {
            month: 'MMM'
          }
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 6
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 150000,
          maxTicksLimit: 5
        },
        gridLines: {
          display: true
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myBarChart" height="90"></canvas>