对象 - 文字DataTable中的Google Visualization样式角色

时间:2015-02-25 15:40:27

标签: javascript google-visualization

我正在根据这些文档返回一个适合传递给DataTable构造函数的对象文字,从AJAX数据创建Google Visualizations(目前是ColumnCharts):

https://developers.google.com/chart/interactive/docs/reference#dataparam

数据一切正常,但我无法弄清楚如何让风格角色发挥作用。我认为文档说要创建下面的内容,但它没有设置颜色;我做错了什么?

{  
     "cols":[  
            {  
                 "id":"x",
                 "type":"number",
                 "label":"Period"
            },
            {  
                 "id":"quotes",
                 "type":"number",
                 "label":"Quotes"
            },
            {  
                 "id":"quotes_style",
                 "type":"number",
                 "p":{  
                        "role":"style"
                 }
            },
            {  
                 "id":"orders",
                 "type":"number",
                 "label":"Converted to Orders"
            },
            {  
                 "id":"orders_style",
                 "type":"number",
                 "p":{  
                        "role":"style"
                 }
            }
     ],
     "rows":[  
            {  
                 "c":[  
                        {  
                             "v":0,
                             "f":"2/2015"
                        },
                        {  
                             "v":4
                        },
                        {  
                             "p":{  
                                    "style":"color:#dddddd"
                             }
                        },
                        {  
                             "v":3
                        },
                        {  
                             "p":{  
                                    "style":"color:#00d67c"
                             }
                        }
                 ],
                 "p":null
            }
     ],
     "p":null
}

1 个答案:

答案 0 :(得分:1)

好的,修好了;首先,cols列的type应为string;然后在rows中,样式列应该只将v设置为样式字符串,而不是p

(通过在帮助文档中的工作数组上调用google.visualization.arrayToDataTable()并在结果上调用.toJSON()来发现这一点 - 非常方便!)

最终JSON:

{  
    "cols":[  
         {  
                "id":"x",
                "type":"number",
                "label":"Period"
         },
         {  
                "id":"quotes",
                "type":"number",
                "label":"Quotes"
         },
         {  
                "id":"quotes_style",
                "type":"string",
                "p":{  
                     "role":"style"
                }
         },
         {  
                "id":"orders",
                "type":"number",
                "label":"Converted to Orders"
         },
         {  
                "id":"orders_style",
                "type":"string",
                "p":{  
                     "role":"style"
                }
         }
    ],
    "rows":[  
         {  
                "c":[  
                     {  
                            "v":0,
                            "f":"2/2015"
                     },
                     {  
                            "v":4
                     },
                     {  
                            "v":"color:#dddddd"
                     },
                     {  
                            "v":3
                     },
                     {  
                            "v":"color:#00d67c"
                     }
                ],
                "p":null
         }
    ],
    "p":null
}