首页 > 解决方案 > 谷歌图表 - 爆炸饼图问题,而只有 1 个输入显示

问题描述

我正在使用谷歌图表制作分解饼图下面是我用于图表的选项

learnersEngagementCtrl.myChartObject.options = {
                        legend: 'none',
                        colors: ['rgb(100, 190, 35)', 'rgb(227, 71, 35)'],
                        slices: {
                          1: { offset: 0.1 }   
                        }

                    };

这是我的数据表代码

learnersEngagementCtrl.myChartObject.data = {
   "cols": [
        { id: "t", label: "Topping", type: "string" },
        { id: "s", label: "Slices", type: "number" }
           ], "rows": [
               {
                 c: [
                      { v: "Engaged users" },
                      { v: learnersEngagementCtrl.NumberOfEngagedUsers }
                     ]
                },

                {
                  c: [
                       { v: "Not Engaged users" },
                       { v: learnersEngagementCtrl.NumberOfUnEngagement}
                     ]
                  }
                 ]
                };

这是我有两个没有问题的输入时的输出

在此处输入图像描述

但是当我有输入时..我面临以下问题

在此处输入图像描述

你能告诉我该怎么做才能解决这个问题吗?

标签: chartsgoogle-visualization

解决方案


如果两个值都存在,则只能添加偏移选项。

初始化其他选项...

learnersEngagementCtrl.myChartObject.options = {
  legend: 'none',
  colors: ['rgb(100, 190, 35)', 'rgb(227, 71, 35)']
};

如果您有两个值,则添加偏移量...

if ((learnersEngagementCtrl.NumberOfEngagedUsers) && (learnersEngagementCtrl.NumberOfUnEngagement)) {
  learnersEngagementCtrl.myChartObject.options.slices = {
    1: { offset: 0.1 }
  };
} else {
  learnersEngagementCtrl.myChartObject.options.slices = null;
}

推荐阅读