dojo chart生成函数
dojo chart生成函数
lzugis
发布于 2018-10-23 15:48:18
发布于 2018-10-23 15:48:18
写了一个函数，就是通过传递参数，生成图表，代码如下：
/**
* created by LZUGIS
* @param container
* @param type
* @param data
* @constructor
*/
function AddChart(container, type, data){
require([
"dojox/charting/Chart2D",
"dojox/charting/themes/PlotKit/blue",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/MoveSlice"
], function(
Chart2D,
themes,
Highlight,
Tooltip,
MoveSlice
){
var chart = new dojox.charting.Chart2D(container);
chart.setTheme(dojox.charting.themes.PlotKit.blue);//设置主题
switch(type){
case "bar":{//柱状图
chart.addPlot("default", {
type: "Columns",
gap: 8//控制柱子之间的间隔
});
break;
}
case "pie":{//饼状图
chart.addPlot("default", {
type: "Pie",
labelOffset: 40//控制标注显示位置，“+”为里面，“-”为外面
});
break;
}
case "line":{//线形图
chart.addPlot("default", {
type: "Lines",
markers:true,//数据点是否显示
tension:"X"//曲线圆滑，"X"与“S”类似，“x”为闭合圆滑
});
break;
}
case "stack":{//堆积图
chart.addPlot("default",{
type: "StackedColumns",
gap: 8
});
break;
}
default :{
break;
}
}
var xStr = ["周一","周二","周三","周四","周五","周六","周日"];
// Add axes
var myLabelFunc = function(text, value, precision){
return xStr[text-1];
};
chart.addAxis("x", { labelFunc: myLabelFunc });
chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });
chart.addSeries("Series A", data);
new Highlight(chart, "default", {highlight: "lightskyblue"});
new Tooltip(chart, "default");
new MoveSlice(chart, "default");
// new Legend({chart: chart}, "legend");
chart.render();
});
}使用方法很简单，如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dojo chart test</title>
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";
@import "dojo/dijit/themes/dijit.css";
@import "dojo/dijit/themes/tundra/tundra.css";
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script src="js/dojochart.js"></script>
<script type="text/javascript">
var chartData = [40000,9200,11811,12000,8662,12000,8662];
AddChart("chart","bar",chartData);
</script>
</head>
<body class="tundra">
<div id="chart" style="width: 400px; height: 400px;">
</div>
<div id="legend"></div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014年10月12日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读