用于 x 轴和网格的 Dojo 图表选择性标签答案

【问题标题】：Dojo Chart selective labels for x-axis & grid用于 x 轴和网格的 Dojo 图表选择性标签
【发布时间】：2012-08-03 04:39:11
【问题描述】：

我需要创建一个道场图表

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

在上面的链接中，我的图表有 x 轴标签，如

当前 x 轴：11:am、12:40pm、2:20pm 和 4pm

对于相同的标签，我有网格线。

现在的要求是我只需要 3 个标签

所需的 x 轴：上午 10 点、下午 1 点和下午 4 点

图表显示 9:30 pm 到 4 pm 之间的数据，间隔 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>

【问题讨论】：

标签： javascript charts dojo axis-labels

【解决方案1】：

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

尝试以不同的方式映射您的序数，您可以达到预期的效果。

PS：与控制小滴答和微滴答的方式相同。

【讨论】：

当我对轴使用负值时，它会在左侧创建一些黑色空间，y 轴仍然从 0 开始。
您的数据是否也使用了负值？仅更改标签值是不够的。
嗯。不是我没有。我不知道如何在那里使用负值？就像是？因为它已经是正值。不确定如何将它们与 y 轴连接。我通过覆盖axis2d找到解决方案的任何方式，因此无需担心我需要的任何标签的步骤，我可以在那里设置。

【解决方案2】：

找到解决方案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"}})

【讨论】：