通过dataTable JSON在Google饼图上设置颜色 [英] Set colors on google piechart via dataTable JSON

问题描述

我使用chartWrapper来拉入一些JSON。

I am using the chartWrapper to pull in some JSON. I am wondering how I would go about settings the colours for each segment on the piechart.

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

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

the data returned by the controller looks like this;

{
   "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} 添加到单元格但没有运气。我可以使用图表中的颜色属性获取颜色，但由于颜色是针对数据的，因此这不适用于我。

I have tried various p: { style: "color: pink" } additions to the cells but with no luck. I can get colours using the colors property on the chart, but this isn't going to work for me as the colour is specifc to the data.

推荐答案

事实证明，您不能为DataTable / JSON中的图表设置颜色（表格的不同故事）。然而，你可以稍微绕过它。

It turns out that you can't set colours for charts (different story for tables) in the DataTable/JSON explicitly. However, you can hack around it slightly.

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

然后在javascript中;

Then in the 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饼图上设置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！