用于x轴的Dojo图表选择性标签&网格
Dojo Chart selective labels for x-axis & grid
我需要创建一个dojo图表
http://codebins.com/bin/4ldqp8z/1
在上面的链接中,我的图表有类似的x轴标签
当前x轴:11:am,12:40pm,2:20pm&下午4点
对于相同的标签,我有网格线。
现在的要求是我只需要3个标签
所需x轴:上午10点,下午1点&下午4点
图表显示了晚上9:30到下午4点之间的数据,间隔10分钟。
这是工作样本:-http://codebins.com/bin/4ldqp8z/1
这是代码:-你需要在http 上运行它
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Code Bins</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" ></script>
</head>
<body Body Params>
<div id="chart1" style="width:300px;height:200px">
</div> </body>
<script type="text/javascript">
require(["dojo/_base/declare", "dojo/dom-style", "dojo/ready", "dojox/charting/Chart", "dojox/charting/action2d/PlotAction", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/Grid"], function(declare, domStyle, ready, Chart, PlotAction, Default, Columns, Lines, Grid) {
ready(function() {
var chart = new Chart("chart1")
.addAxis("y", { vertical: true,
fixLower: "major",
fixUpper: "major",
leftBottom: false,
majorTicks:false,
minorTicks:false,
stroke: {color:"#FFF",width:0},
majorTick:{length:0}})
.addAxis("x", {
labels: labels, /* Lables are coming from here*/
majorTicks:false,
majorTick:{length:4,color:"#FFFFFF"},
majorLabels:true,
majorTickStep:10,
minorTicks:false,
max:40,
stroke: {color:"#CFCFCF",width:"1"}})
.addSeries("y", close, { fill: "#EBEBEB"})
.addPlot("Grid", {
type: "Grid",
markers: true
});
chart.render();
});
});
var close = [];
for (var i = 0; i < 40; i++) { close.push(parseInt((Math.random() * 100) + 1200)); }
var labels = [{value: 1,text: "9:30am"},
{value: 2,text: "9:40am"},{value: 3,text: "9:50am"},{value: 4,text: "10am"},{value: 5,text: "10:10am"},{value: 6,text: "10:20am"},{value: 7,text: "10:30am"},{value: 8,text: "10:40am"},{value: 9,text: "10:50am"},{value: 10,text: "11am"},{value: 11,text: "11:10am"},{value: 12,text: "11:20am"},{value: 13,text: "11:30am"},{value: 14,text: "11:40am"},{value: 15,text: "11:50am"},{value: 16,text: "12pm"},{value: 17,text: "12:10pm"},{value: 18,text: "12:20pm"},{value: 19,text: "12:30pm"},{value: 20,text: "12:40pm"},{value: 21,text: "12:50pm"},{value: 22,text: "1pm"},{value: 23,text: "1:10pm"},{value: 24,text: "1:20pm"},{value: 25,text: "1:30pm"},{value: 26,text: "1:40pm"},{value: 27,text: "1:50pm"},{value: 28,text: "2pm"},{value: 29,text: "2:10pm"},{value: 30,text: "2:20pm"},{value: 31,text: "2:30pm"},{value: 32,text: "2:40pm"},{value: 33,text: "2:50pm"},{value: 34,text: "3pm"},{value: 35,text: "3:10pm"},{value: 36,text: "3:20pm"},{value: 37,text: "3:30pm"},{value: 38,text: "3:40pm"},{value: 39,text: "3:50pm"},{value: 40,text: "4pm"}];
// BOTTOM OF PAGE
</script>
</html>
您的X标签明确地将主要刻度步长设置为10。根据你的标签判断,应该是18:1是10分钟,6是1小时,18是你想要的3小时。所以这部分很简单。问题是步数是从0开始计算的,0是上午9:20。你应该从另一个数字开始。一种可能的方法是让上午10点为零。这意味着你应该把你的数据和标签移回来,就像这样:
var labels = [
{value: -3,text: "9:30am"},
{value: -2,text: "9:40am"},
{value: -1,text: "9:50am"},
{value: 0,text: "10am"},
{value: 1,text: "10:10am"},
{value: 2,text: "10:20am"}
// and so on
];
或者从早上7点开始,就像这样:
var labels = [
// we have no data for 7am, so we skip labels too
{value: 15,text: "9:30am"},
{value: 16,text: "9:40am"},
{value: 17,text: "9:50am"},
{value: 18,text: "10am"},
{value: 19,text: "10:10am"},
{value: 20,text: "10:20am"}
// and so on
];
试着用不同的方式映射你的序数,你就能达到想要的效果。
附言:同样的方式,你可以控制轻微和微小的蜱虫。
找到解决方案http://codebins.com/bin/4ldqp8z/2
扩展轴2d和它的一些非常简单。不需要计算任何东西的步长。只要给你想给的任何标签。
dojo.provide("myDojo.myAxis");
dojo.declare("myDojo.myAxis", dojox.charting.axis2d.Default, {
calculate: function(min, max, span, labels){
this.inherited(arguments);
this.ticks.major= [{ value:4, label:"10am"},{ value:22, label:"1pm"},{ value:40, label:"4pm"}]
return this;
}
});
dojox.charting.axis2d.myAxis = myDojo.myAxis;
添加轴时添加类型
.addAxis("x", {
labels: labels, /* Lables are coming from here*/
majorTicks:false,
majorTick:{length:4,color:"#FFFFFF"},
majorLabels:true,
majorTickStep:10,
minorTicks:false,
max:40,
type:"myAxis",
stroke: {color:"#CFCFCF",width:"1"}})
相关文章:
- 在<页眉>标签
- jquery点击函数select&取消选择
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Angular js-返回一个包含类似
- 一点javascript元编程&可链接的设置器
- Twitter引导程序Typeahead-Id&标签
- 用于x轴的Dojo图表选择性标签&网格
- 删除 p标签之间
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- 谷歌标签管理器添加&instrad of just&转换为脚本src
- gRaphael折线图:用JSON数据填充弹出标签而不是x&y坐标
- 钛:标签&选项卡组-自定义;backgroundImage”;
- 在带有id&标签
- jQuery针对特定ul&李标签
- javascript替换®和html标签
- JavaScript DOM api能得到属性&的原始大小写吗?标签的名字
- 使用Switch语句来更改值&根据预先存在的值为文本输入插入标签
- 防止降价处理器转换“>"至“>"在<脚本>标签
- 谷歌图表时间线:问题与着色&条形标签