0

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、色はデータに固有であるため、これは機能しません。

4

1 に答える 1

0

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();
 });
于 2012-10-25T15:22:10.600 に答える