道場圖表爲x軸和網格

選擇性標籤我需要創建一個道場圖表道場圖表爲x軸和網格

http://codebins.com/bin/4ldqp8z/1

在上述鏈路我的圖表具有x軸標籤等

電流x軸： 11時許，12:40 PM，下午2:20 & 16:00

爲同一標籤我有網格線。

現在要求是我只需要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>

來源

2012-08-03 gaurang171

實測溶液http://codebins.com/bin/4ldqp8z/2

擴展axis2d及其一些那麼簡單。不需要計算任何事情上的步驟。只要給你想要給的任何標籤。同時加入

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

來源

2012-08-04 21:23:19 gaurang171

你的X標籤設置一個主刻度步驟10明確。從你的標籤來看，它應該是18：1是10分鐘，6是1小時，18是你想要的3小時。所以這部分很容易。問題是步數從0開始計數，0是上午9:20。你應該從一個不同的數字開始。一種可能的方法是使10am爲零。這意味着你應該您的數據和標籤移回，這樣的：

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 
];

嘗試不同的映射你的序，您可以達到預期的效果。

PS：您可以控制次要和微小滴答的相同方式。

來源

2012-08-04 06:54:59

當我使用負值的軸它創建於左側和y軸一些黑色的空間仍然從0開始 – gaurang171 2012-08-04 21:20:46

您是否使用爲負值的數據呢？只改變標籤值是不夠的。 – 2012-08-05 01:04:02

嗯。不是我沒有。我不知道如何在那裏使用負值？就像是？因爲它已經是正面的價值。不知道如何用y軸連接他們..任何方式，我通過重寫axis2d找到解決方案，所以無需擔心任何標籤我需要我可以設置在那裏的步驟。 – gaurang171 2012-08-05 02:56:34

道場圖表爲x軸和網格

回答

相關問題