如何在 Chart.js v3 中显示具有不同数据集的时间序列配置的面积图？

问题描述

我一直在尝试实现具有不同数据集的 area 图表，我们正在通过提供最小值和最大值选项来自动生成标签来遵循时间序列图表的配置。这是我的代码：

var feronisData = [398,445];
     var formattedDates = ["Feb 01","Mar 20"];
     var colors = ['#5ba2df','#e2ac00','#59b110'];
     
     
      var data = {
      /* labels: formattedDates,*/
        datasets: [{
        type: 'line',fill: 1,spanGaps: true,pointStyle: 'circle',label: 'Feronis',data: [{x: moment('2021-02-10 00:00:00.000').format('MMM DD'),y: 250},{x: moment('2021-02-28 00:00:00.000').format('MMM DD'),y: 350}],borderColor: '#5ba2df',labels: [],borderWidth: 3,backgroundColor: 'rgba(0,0)',},{
        type: 'line',fill: true,borderColor: '#2187f3',backgroundColor: '#219634',borderWidth: 1,spanGaps: false,label: 'Others',data: [{x: moment('2021-01-24 00:00:00.000').format('MMM DD'),y: 150},{x: moment('2021-02-04 00:00:00.000').format('MMM DD'),y: 300},{x: moment('2021-03-24 00:00:00.000').format('MMM DD'),y: 450}],borderColor: '#e2ac00',labels:[],}]
      };
      var options = {
        showLines: true,layout: {
          padding: {
            left: 0,right: 0,top: 0,bottom: 80
          }
        },elements: {
          point: {
            radius: 1,hoverRadius: 5,}
        },hover: {
          mode: 'index',intersect: false
        },responsive: true,tooltips: {
          enabled: true,mode: 'index',intersect: false,yAlign: 'right',scales: {
        x : {
        type: 'time',min: 'Jan 01',max: 'Jul 01',time: {
          unit: 'day',displayFormats: {
            day: 'MMM DD'
          }
        }
          /* xAxes: [{
            type: 'time',time: {
            unit: 'day',unitStepSize: 10,format: 'MMM DD',displayFormats: {
                'day': 'dddd','week': 'MMM DD','month': 'MMM DD'
              },min: 'JAN 01',max: 'JUL 01'
            },display: true,interval: 5,intervalType: "month",gridLines: {
              drawOnChartArea: false,}
          }],*/
      },y: {
        stacked: true,}
      }}
  this.chart = new Chart('canvas',{
        responsive: true,data: data,options: options
      });

fiddle 上也有同样的内容：https://jsfiddle.net/erdfs37h/

配置是后端不会为我提供任何标签集作为每个数据集中显示的标签数组。相反，我们直接依赖于 data 数组，该数组提供这种格式的值 [{x: 'xItem',y: 'someValuetoPlot'}]

注意：实际上我将使用 React.js 渲染它，其中我的通用组件根据这些配置生成图表，但它几乎与我在 fiddle 链接上显示的相似。

由于我们也在使用时间序列配置，您能指出我在这里遗漏的任何具体内容吗？

---

目前，我认为解决方案可以通过为每个数据集添加这些关键字段来实现

type: 'line',fill: {
      target: 'origin',above: 'rgb(123,43,54)',// Area will be reddish above the origin
      below: 'rgb(65,47,231)' // And blue below the origin
    },

解决方法

您的问题是您为 backgroundColor 提供了重复的键，并且在您的副本中将其设置为完全透明的颜色，这就是为什么它不显示数据集配置中的标签数组是多余的，因为您正在使用对象符号

示例：

var feronisData = [398,445];
var formattedDates = ["Feb 01","Mar 20"];
var colors = ['#5ba2df','#e2ac00','#59b110'];


var data = {
  /* labels: formattedDates,*/
  datasets: [{
    type: 'line',fill: 1,spanGaps: true,pointStyle: 'circle',label: 'Feronis',data: [{
      x: moment('2021-02-10 00:00:00.000').format('MMM DD'),y: 250
    },{
      x: moment('2021-02-28 00:00:00.000').format('MMM DD'),y: 350
    }],borderColor: '#5ba2df',borderWidth: 3,},{
    type: 'line',fill: true,borderColor: '#2187f3',backgroundColor: '#219634',borderWidth: 1,spanGaps: false,label: 'Others',data: [{
      x: moment('2021-01-24 00:00:00.000').format('MMM DD'),y: 150
    },{
      x: moment('2021-02-04 00:00:00.000').format('MMM DD'),y: 300
    },{
      x: moment('2021-03-24 00:00:00.000').format('MMM DD'),y: 450
    }],}]
};
var options = {
  showLines: true,layout: {
    padding: {
      left: 0,right: 0,top: 0,bottom: 80
    }
  },elements: {
    point: {
      radius: 1,hoverRadius: 5,}
  },hover: {
    mode: 'index',intersect: false
  },responsive: true,plugins: {
    tooltip: {
      enabled: true,mode: 'index',intersect: false,yAlign: 'right',scales: {
    x: {
      type: 'time',min: 'Jan 01',max: 'Jul 01',time: {
        unit: 'day',displayFormats: {
          day: 'MMM DD'
        }
      }
    },y: {
      stacked: true,}
  }
}
this.chart = new Chart('canvas',{
  responsive: true,data: data,options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas style="height: 400px;" id='canvas' />

您可能还想查看迁移指南，因为我可以很快看到您的工具提示也配置错误：https://www.chartjs.org/docs/master/getting-started/v3-migration.html