Jquery google图表图形设置图例值和相同颜色列

数据=[[“product1”，3.612671999999977]，“product2”，6.82759799999999]，“product2”，1008.0]]当我使用数组数据并在列或条形图中实现时，时间仅显示为图例值，而不是“不同的产品名称”，所有条形图看起来都是相同颜色的列。我想在所有列中添加图例名称作为产品名称和不同颜色

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
$.ajax({
url:“数据路径”，
数据类型：“json”
}).done（函数（jsonData）{
载荷数据（jsonData）；
}).fail（函数（jqXHR、textStatus、errorshown）{
var jsonData=[[“产品1”，450]，“产品2”，23]，“产品3”，1008.0]；
loadData（jsonData，'1'，'Column'）；
});
//加载json数据
函数loadData（jsonData、id、chartType）{
//创建数据表
var dataTable=new google.visualization.dataTable（）；
开关（图表型）{
案例“列”：
//添加日期列
addColumn（'string'，'Product'）；
dataTable.addColumn（'number'，'Value'）；
$.each（jsonData，函数（productIndex，product）{
//添加产品数据
dataTable.addRow([
产品[0]，
产品[1]，
]);
});
打破
}
//绘制图表
$（窗口）。调整大小（函数（）{
图纸（id、图表类型、数据表）；
});
图纸（id、图表类型、数据表）；
}
//保存图表以便重新绘制
var图={}；
变量选项={
专栏：{
图表区：{
高度：“100%”，
宽度：“100%”，
排名：64，
左：64，
右：32，
底数：48
},
高度：“100%”，
图例：{
位置：'顶部'
},
点数：4，
宽度：“100%”
},
馅饼：{
高度：“100%”，
宽度：“100%”
},
行：{
高度：“100%”，
宽度：“100%”，
图例：{
位置：'底部'
},
点数：4，
宽度：“100%”
}
};
//绘制图表
函数drawChart（id、chartType、dataTable）{
如果（！charts.hasOwnProperty（id））{
charts[id]=新的google.visualization.ChartWrapper({
chartType:chartType+“图表”，
集装箱：“图表-”+id，
选项：选项[图表类型]
});
}
图表[id].setDataTable（dataTable）；
图表[id]。绘图（）；
}
});
html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
.图表{
显示：内联块；
身高：100%；
宽度：32%；
}
在本例中，您希望为每个产品创建列，

而不是每个产品的行

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
//保存图表以便重新绘制
var图={}；
变量选项={
专栏：{
图表区：{
高度：“100%”，
宽度：“100%”，
排名：64，
左：64，
右：32，
底数：48
},
高度：“100%”，
图例：{
位置：'顶部'
},
点数：4，
宽度：“100%”
},
馅饼：{
高度：“100%”，
宽度：“100%”
},
行：{
高度：“100%”，
宽度：“100%”，
图例：{
位置：'底部'
},
点数：4，
宽度：“100%”
}
};
var jsonData=[[“产品1”，450]，“产品2”，23]，“产品3”，1008.0]；
loadData（jsonData，'1'，'Column'）；
//加载json数据
函数loadData（jsonData、id、chartType）{
//创建数据表
var dataTable=new google.visualization.dataTable（）；
开关（图表型）{
案例“列”：
//添加日期列
addColumn（'string'，'Category'）；
var rowIndex=dataTable.addRow（）；
setValue（rowIndex，0，dataTable.getColumnLabel（0））；
$.each（jsonData，函数（productIndex，product）{
var colIndex=dataTable.addColumn（'number'，product[0]）；
//添加产品数据
setValue（rowIndex，colIndex，product[1]）；
});
打破
}
//绘制图表
$（窗口）。调整大小（函数（）{
图纸（id、图表类型、数据表）；
});
图纸（id、图表类型、数据表）；
}
//绘制图表
函数drawChart（id、chartType、dataTable）{
如果（！charts.hasOwnProperty（id））{
charts[id]=新的google.visualization.ChartWrapper({
chartType:chartType+“图表”，
集装箱：“图表-”+id，
选项：选项[图表类型]
});
}
图表[id].setDataTable（dataTable）；
图表[id]。绘图（）；
}
});
html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
.图表{
身高：100%；
}

非常感谢，关于如何向加载函数添加多个变量过程，我有一个疑问？var jsonData=[[“产品1”，450]，“产品2”，23]，“产品3”，1008.0]；loadData（jsonData，'1'，'Column'）；和我做的一样。。var jsonData2=[[“产品1”，450]，“产品2”，23]，“产品3”，1008.0]；加载数据（jsonData2，'1'，'Column'）；传递给函数loadData（jsonData、jsonData2 id、chartType），但我得到了错误。我不想每次都使用ajax调用，只想在loaddata函数中使用可变值和加载。我在一个页面中有7个图形，所以在fornt端加载需要时间。我怎么做？对不起，我不太明白，为什么需要发送多个json数据？为什么不直接调用加载数据