我已经阅读了Chart.js文档上提供的教程,但我正在努力弄清楚如何使我的数据符合库的要求.

我的代码是这样的

 const labels = [
    '1980',
    '1981',
    '1982'
]

 const dat = [
{"1980":{"legal":{"departments":1, "Foreign Agency":3, Corporation:3}}, 
"1981":{"legal":{"departments":2, "Foreign Agency":2, Corporation:5}},
"1982":{"legal":{"departments":3, "Foreign Agency":1, Corporation:8}}
}
];


  const data1 = {
    labels: labels,
    datasets: [{
      label: 'Department number',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: dat,
      parsing: {
        yAxisKey: dat[0][1980]["legal"][" departments"]
      }
    }]
  };

  const config1 = {
  type: 'bar',
  data: data1,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Stacked Bar Chart of legal entities 1980-1982'
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};

  const myChart1 = new Chart(
    document.getElementById('myChart1'),
    config1
  );
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
<canvas id="myChart1" ></canvas>

在现实中,数据要长得多,但采用这种一般形式.我还可以控制数据是如何生成的.

除了图形中什么都没有显示(没有生成错误)之外,我的另一个问题是,指定要显示的法律数据的年份和类别从一开始就不是一种真正实用的方法.当然,理想情况下,标签应该从数据中生成,因为它们就在那里.

预期的输出将是一个堆叠的条形图,其中包含代表每一年的每个法律类别的值

推荐答案

如果您想使用对象表示法,您还必须为chart.js提供正确的x标签.此外,您不能使用动态密钥,您的数据必须位于同一密钥中.

const dat = {
  "1980": {
    "legal": {
      "departments": 1,
      "Foreign Agency": 3,
      Corporation: 3
    },
    x: "1980"
  },
  "1981": {
    "legal": {
      "departments": 2,
      "Foreign Agency": 2,
      Corporation: 5
    },
    x: "1981"
  },
  "1982": {
    "legal": {
      "departments": 3,
      "Foreign Agency": 1,
      Corporation: 8
    },
    x: "1982"
  }
};

const data1 = {
  datasets: [{
    label: 'Department number',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: Object.values(dat),
    parsing: {
      yAxisKey: 'legal.departments'
    }
  }]
};

const config1 = {
  type: 'bar',
  data: data1,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Stacked Bar Chart of legal entities 1980-1982'
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};

const myChart1 = new Chart(
  document.getElementById('myChart1'),
  config1
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart1"></canvas>

您还可以预先将所有数据映射到单个数组,并提供:

const labels = [
  '1980',
  '1981',
  '1982'
]

const dat = {
  "1980": {
    "legal": {
      "departments": 1,
      "Foreign Agency": 3,
      Corporation: 3
    },
    x: "1980"
  },
  "1981": {
    "legal": {
      "departments": 2,
      "Foreign Agency": 2,
      Corporation: 5
    },
    x: "1981"
  },
  "1982": {
    "legal": {
      "departments": 3,
      "Foreign Agency": 1,
      Corporation: 8
    },
    x: "1982"
  }
};

const values = Object.values(dat).map(e => (e.legal.departments))

const data1 = {
  labels: labels,
  datasets: [{
    label: 'Department number',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: values
  }]
};

const config1 = {
  type: 'bar',
  data: data1,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Stacked Bar Chart of legal entities 1980-1982'
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  }
};

const myChart1 = new Chart(
  document.getElementById('myChart1'),
  config1
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart1"></canvas>

Javascript相关问答推荐

使用AJX发送表单后,$_Post看起来为空

我应该在redux reducer中调用其他reducer函数吗?

从mat—country—select获取整个Country数组

我怎么在JS里连续加2个骰子的和呢?

当id匹配时对属性值求和并使用JavaScript返回结果

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

在Java中寻找三次Bezier曲线上的点及其Angular

NG/Express API路由处理程序停止工作

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

如何在箭头函数中引入or子句?

Next.js中的服务器端组件列表筛选

如何修复错误&语法错误:不能在纯react 项目中JEST引发的模块&之外使用导入语句?

用Reaction-RT-Chart创建实时条形图

无法使用Redux异步函数读取未定义的useEffect钩子的属性';map';

需要RTK-在ReactJS中查询多个组件的Mutations 数据

是否有静态版本的`instanceof`?

使用jQuery每隔几秒钟突出显示列表中的不同单词

如何将缓冲区数组转换回音频

Reaction:从子组件调用父组件中的函数

有没有一种方法可以在不定义任何属性的情况下使用CSS转换?