dojo chart 柱状图滑动效果如何实现

biany2 2013-09-12 05:38:54

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Basic Declarative Chart</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="../../../resources/style/demo.css" media="screen">
</head>
<body>
<h1>Demo: Basic Declarative Chart</h1>



<!-- load dojo and provide config via data attribute -->
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="js/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>

require([
"dojox/charting/Chart",
"dojox/charting/themes/MiamiNice",
"dojox/charting/action2d/MouseIndicator", //注意位置
"dojox/charting/action2d/MouseZoomAndPan",//注意函数对应位置
"dojox/charting/plot2d/Columns",
"dojox/charting/plot2d/Markers",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
], function(Chart, theme,MouseIndicator,MouseZoomAndPan){
// Define the data
var chartData = [40000,9200,11811,12000,8662,13887,14200,12222,22000,18662,23887,24200,22222,22000,20009,21288,22099];


var chartData2 = [41000,19200,12811,13000,8662,13887,14200,12222,22000,18662,23887,24200,22222,22000,20009,21288,22099];

// Create the chart within it's "holding" node
var chart = new Chart("chartNode");

// Set the theme
chart.setTheme(theme);

// Add the only/default plot
chart.addPlot("default", {
type: "Columns", // our plot2d/Pie module reference as type value
markers: true,
gap: 5
});


var xStr = ["7-1","7-2","7-3"];


// 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" });

// Add the series of data
chart.addSeries("China",chartData);

chart.addSeries("2Monthly Sales",chartData2);


var str1,str2;


//鼠标指标
new MouseIndicator(chart, "default", { series: "China",

fontColor:"#ffffff",

lineStroke :"#ED9A07", //指标线颜色


stroke:"#ED9A07",//指标外壳颜色

fill:"ED9A07",//填充色

markerStroke:"#ED9A07",//圆圈标记颜色

markerFill:"#fff",

fillFunc: function(v){

return v.y<20000?"#ED9A07":"red";

},

labelFunc: function(v){

//return "x: "+v.x+", y:"+v.y;
str1 = "温度: "+v.y;
return str1;

}



});

//鼠标指标
new MouseIndicator(chart, "default", { series: "2Monthly Sales",

fontColor:"#ffffff",

lineStroke :"#ED9A07", //指标线颜色


stroke:"#ED9A07",//指标外壳颜色

fill:"ED9A07",//填充色

markerStroke:"#ED9A07",//圆圈标记颜色

markerFill:"#fff",

fillFunc: function(v){

return v.y<20000?"#ED9A07":"blue";

},

labelFunc: function(v){

//return "x: "+v.x+", y:"+v.y;

return str1 +"用户: "+v.y;

}



});



// Render the chart!
chart.render();

});
</script>
<script>


</script>

<!-- create the chart -->
<div id="chartNode" style="width: 900px; height: 500px;"></div>


</body>
</html>




我现在实现了鼠标点击显示数据功能,
1现在需要改成鼠标滑动上去就显示数据
2每个柱子顶部最大值全部显示出来
3y轴能定义个单位,比如温度什么的

希望能找到一个类似于MouseIndicator的方法给我用,请各位大神指教啊
...全文
213 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
楼主能将代码发给我学习一下吗,本人菜鸟新手。邮箱1321451088@qq.com
  • 打赏
  • 举报
回复
我正在学习。dojo目前国内用户应该不是太多。版本变化也太快,中文文档不多是它最大的问题。不过我觉得感觉这个框架很有前途。
biany2 2013-09-13
  • 打赏
  • 举报
回复
看来csdn玩dojo的人不多啊,我的问题已经解决了。


				  chart.connectToPlot("default", "China",function(args){
					switch(args.type){
						case "onclick":
							if(args.index == 1){
								var shape = args.shape;
								alert(args.v);
							}
							break;
						case "onmouseover":
							var shape = args.shape;
							//$("#td1").innerHTML(chartData2[args.index]+" :"+chartData[args.index]);
							//alert($("#input1")[0].value);
							document.getElementById("test").innerHTML=chartData2[args.index]+" :"+chartData[args.index];
							break;
						case "onmouseout":
							//TODO...
							break;
						default:
							//TODO...
							break;
					}
				});
biany2 2013-09-12
  • 打赏
  • 举报
回复

这个是我的现在效果

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧