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();
 });

通过dataTable JSON在google piechart上设置颜色

1 个答案: