gwt - 通过 dataTable JSON 在谷歌饼图上设置颜色

Question

我正在使用 chartWrapper 来提取一些 JSON。我想知道如何设置饼图上每个段的颜色。

//draw the channel summary data
 $.getJSON("@Url.Action("SummaryData", new { id = Model.Id })", function(data) {
     var channelChartWrapper = new window.google.visualization.ChartWrapper({
         chartType: "PieChart",
         dataTable: data,
         options: {
             title: "Title here"
         },
         containerId: "summary-chart",
     });
     channelChartWrapper.draw();
 });

控制器返回的数据如下所示；

{
   "cols":[
      {
         "id":"",
         "label":"Channel",
         "type":"string",
         "pattern":""
      },
      {
         "id":"",
         "label":"Value",
         "type":"number",
         "pattern":""
      }
   ],
   "rows":[
      {
         "c":[
            {
               "v":"A",
               "f":null
            },
            {
               "v":17,
               "f":null
            }
         ]
      },
      {
         "c":[
            {
               "v":"B",
               "f":null
            },
            {
               "v":208,
               "f":null
            }
         ]
      },
      {
         "c":[
            {
               "v":"C",
               "f":null
            },
            {
               "v":4,
               "f":null
            }
         ]
      },
      {
         "c":[
            {
               "v":"D",
               "f":null
            },
            {
               "v":2,
               "f":null
            }
         ]
      }
   ]
}

我尝试p: { style: "color: pink" }了对细胞进行各种添加，但没有运气。我可以使用colors图表上的属性获取颜色，但这对我不起作用，因为颜色是数据特定的。

Answer 1

事实证明，您无法在 DataTable/JSON 中明确设置图表的颜色（表格的不同故事）。但是，您可以稍微破解它。

{
   cols:[...,]
   rows:[...,]
   p:{
      colors: ["#ffcc00","#ff0000",...]
   }
}

然后在javascript中；

$.getJSON("@Url.Action("SummaryData", new { id = Model.Id })", function(data) {
     var channelChartWrapper = new window.google.visualization.ChartWrapper({
         chartType: "PieChart",
         dataTable: data,
         options: {
             title: "Title here",
             colors: data.p.colors
         },
         containerId: "summary-chart",
     });
     channelChartWrapper.draw();
 });