如何在 Google 可视化圆环图上获得正确的图例标签

Question

我正在绘制一个只有 2 个分段的饼图，一个分段为红色，另一个分段为蓝色。图表绘制正确，但分段颜色和图例使用了错误的颜色。在随附的屏幕截图中，蓝色部分应为红色并在图例中标记为“逾期”，红色部分应为蓝色并在图例中标记为“协议”。段中显示的数字是正确的，只是切换了颜色。

下面是构建图表数据和分配颜色的代码。

chartData[0] = ['Status', 'Count', {role: 'style'}]
chartData[1]= ['Overdue',1012,"red"]
chartData[2]= ['Protocol',980,"#BDC667"]
var datatable = google.visualization.arrayToDataTable(chartData);

图表选项是：

var options = {
    title: 'Installed Curtains By Status',
    pieSliceText: 'value',
    chartArea: {
        width: '95%',
    },
    animation: {
        startup: true,
        duration: 1000,
        easing: 'out',
    },
    legend: {position: "right"}
};

我做错了什么？

Answer 1

PieChart
不支持样式角色显示的是默认颜色。
相反，请使用 colors 配置选项。

var options = {
  title: 'Installed Curtains By Status',
  pieSliceText: 'value',
  chartArea: {
    width: '95%',
  },
  colors: ["red", "#BDC667"],
  animation: {
    startup: true,
    duration: 1000,
    easing: 'out',
  },
  legend: {position: "right"}
};

检查图表的 data format 角色可用性...

如何在 Google 可视化圆环图上获得正确的图例标签

How to get correct legend labels on a Google visualization donut chart

jquery

charts

google-visualization

pie-chart