如何将此 GraphQL 数据添加到 highcharts 中的饼图？

编程问答 2022-05-03

问题描述

如果我能得到任何帮助，我将不胜感激

我需要用 4 个标准饼图绘制饼图：ABC、BCD、CDE 和 DEF 每个 Pie 都有一个来自我的 GraphiQL 解析器的数据点，如下所示：

{
  "data": {
    "metrics": {
      "A": 56147.85,"B": 116480.51,"C": 56147.85,"D": 120329.45000000001,}
  }
}

这是我的饼图高图代码

function PieChart() {
  const { loading,error,data } = useQuery(CONC,{
    variables: {
      Currency: 'USD',Date: {
        date: '2019-05-01',date_range: ['2019-05-01','2019-06-10'],},Options: {
        a: {
          prop: '44',csprop: ['14','14','40','60'],d: {
          prop: '104',csprop: ['511','289','519','62'],C: 'G',Incl: false,DFilters: [
        {
          by: 'P',values: [],],});

  const Top = [];
  const First = [];
  const Second = [];
  const Rest = [];

  data &&
    data.metrics.forEach((e) => {
      Top.push(e['A']);
      First.push(e['B']);
      Second.push(e['C']);
      Rest.push(e['D']);
    });

  return (
    <HighchartWrapper
      chartOptions={{
        chart: {
          type: 'pie',height: 230,// width: 565,title: {
          text: '',tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',accessibility: {
          point: {
            valueSuffix: '%',exporting: {
          enabled: false,plotOptions: {
          pie: {
            allowPointSelect: true,cursor: 'pointer',dataLabels: {
              enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',series: [
          {
            name: 'R',data: [
              { name: 'ABC',y: Top},{ name: 'BCD',y: First},{ name: 'CDE',y: Second},{ name: 'DEF',y: Rest},}}
    />
  );
}

export default memo(PieChart);

问题：

GraphiQL 查询正在生成结果。

但我相信这是我试图推送数据的方式，这给了我一个空饼图

先谢谢大家

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

graphqlgraphqlhighchartshighchartsreact-highchartsreactjsreactjsreactjsreactjs