功能分类: Data Applab JavaScript 少儿编程
在指定的 chartId
唯一标识的图表控件上,使用指定的 chartData
图表数据画指定 chartType
类型的图表。
数据驱动的 APP 应用,可以通过处理及分析数据,从数据中发掘并获取额外的价值。将数据通过图表的形式展现出来,可以帮助人们更好的洞察数据模式及数据关系,而这直接看原始数据是比较困难的。
在使用这个方法之前,指定的 chartId
唯一标识的 chart 图表控件需要预先在 screen 屏幕上创建。你可以在 Applab 里的 设计
模式下,拖拽一个图表控件进行创建。绘制图表时,可选的图表类型包括:"bar" 柱状图, "line" 折线图,"pie" 饼图 以及 "scatter" 散点图。指定的 chartData
图表数据需要是一个包含对个 JSON 对象的数组类型数据。
Bar 柱状图 在 JSON 对象中的第一个属性需要包含一组字符串(如在一个显示一年数据的图表里,这组字符串需要包含一年里 12 个月每个月的名称),它指定在横轴上的显示的每个柱状图对应的名称。第二个 JSON 属性(以及其他的属性)需要包含一组数字,每个数字对应一个条柱图在纵轴上的高度(数量),决定条柱在图表里显示的高度。
Line 折线图 在 JSON 对象中的第一个属性需要包含一组字符串(如在一个显示一年数据的图表里,这组字符串需要包含一年里 12 个月每个月的名称),它指定在横轴上的显示的每个折线端点对应的名称。第二个 JSON 属性(以及其他的属性)需要包含一组数字,每个数字对应一个折线端点在纵轴上的高度(数量),决定折线端点在图表里显示的高度。
Pie 饼图 在 JSON 对象中的第一个属性需要包含一组字符串(如在一个显示一年数据的图表里,这组字符串需要包含一年里 12 个月每个月的名称),它指定在饼图上的显示的每个分区对应的名称。第二个 JSON 属性(以及其他的属性)需要包含一组数字,每个数字对应一个分区在饼图上的大小(数量),决定分区在整个圆里占有的显示比例。
Scatter 散点图 在 JSON 对象中的第一个属性需要包含一组字符串(如在一个显示一年数据的图表里,这组字符串需要包含一年里 12 个月每个月的名称),它指定在横轴上的显示的每个名称。第二个 JSON 属性(以及其他的属性)需要包含一组数字,每个数字对应每一项对应的点在纵轴上的高度(数量)。
var data = [{ movie:"Avatar", grossBillions:2.788},
{movie:"Titanic", grossBillions:2.186},
{movie:"Star Wars: The Force Awakens", grossBillions:1.871},
{movie:"Jurassic World", grossBillions:1.669},
{movie:"Marvel's The Avengers", grossBillions:1.519}];
drawChart("chart1", "bar", data);
示例代码:Tomatoes 销售图表 通过在图标上显示 gross sales 以及 Rotten Tomatoes percentage 两项指标,来观察两项指标是否相关。
// 通过在图标上显示 gross sales 以及 Rotten Tomatoes percentage 两项指标,来观察两项指标是否相关
var data = [{ movie:"Avatar", grossBillions:2.788, tomatoes:0.83},
{movie:"Titanic", grossBillions:2.186, tomatoes:0.88},
{movie:"Star Wars: The Force Awakens", grossBillions:1.871, tomatoes:0.93},
{movie:"Jurassic World", grossBillions:1.669, tomatoes:0.71},
{movie:"Marvel's The Avengers", grossBillions:1.519, tomatoes:0.92}];
var myOptions={};
myOptions.bars="vertical";
myOptions.title="Gross Sales in Billions and Rotten Tomatoes Percentage";
myOptions.colors=["green", "red"];
myOptions.legend="on";
drawChart("chart1", "bar", data, myOptions);
drawChart(chartId, chartType, tableName, chartData, options, callback);
名称 | 类型 | 必需 | 参数描述 |
---|---|---|---|
chartId | string | Yes | chart 图表控件 的 id 唯一标识。必须以字母开头,不能包含空格,可以包含字母、数字、减号 - 以及下划线 _ 。 |
chartType | string | Yes | 指定图表类型。可以是:"bar" 柱状图、"line" 折线图、"pie" 饼图、或 "scatter" 散点图。 |
chartData | array of objects | Yes | 指定在图表上显示的数据。 |
options | object | No | 指定图表显示选项。必须是 javaScript object 对象变量或使用 {} 和 : 定义的 javaScript object 对象。(参考下面代码。) |
callback | function | No | drawChart 调用完成后被异步调用执行的函数。 |
没有返回值。只在显示结果页面体现代码执行前后变化。
drawChart()
,放在循环里执行。因为循环里不会等异步调用结束才继续执行。