测量轴 - 限制刻度值

时间:2014-02-05 18:42:52

标签: dimple.js

我的图表看起来像这样:

Chart

我将测量轴用于Y:

y = myChart.addMeasureAxis("y", "rate");
y.tickFormat = ",.4f";

正如您所见,滴答从0.0000开始,而数据的值从3.0000以上开始。

例如,是否可以显示从2.5000开始的y刻度?

我试过了:

y.overrideMin = 2;

但它没有像我期望的那样起作用。 x轴消失:

chart 谢谢。

3 个答案:

答案 0 :(得分:1)

我担心覆盖最小轴值目前有点不理想。有一种解决方法,但它有点像黑客。基本上你只是完全隐藏x轴并绘制第二个图表,顶部没有系列,隐藏第二个图表的y轴。

所以在绘图之后:

c2 = new dimple.chart(svg, data);
c2.addCategoryAxis("x", "Day");
c2.addMeasureAxis("y", "Value").hidden = true;
c2.draw();

两个轴很好地相遇,看起来就像你想要的那样。

这是一个有效的例子:

http://jsfiddle.net/87GHM/2/

答案 1 :(得分:0)

我也陷入了这个问题。无法找到y轴上“滴答”数量的减少程度。该库没有公开任何方法。所以,我修改了图书馆以满足我的需求。所以这是一个黑客^ _ ^

使用库的注释版本,即dimple.v1.1.4.js

找到第338行

if (!this.hidden) {
                switch (this.chart._axisIndex(this, "y")) {
                case 0:
                    this._draw = d3.svg.axis()
                        .orient("left")
                        .scale(this._scale)
                        .ticks(5);   <<<<<<<<<------ This wasn't there before
                    break;
                case 1:
                    this._draw = d3.svg.axis()
                        .orient("right")
                        .scale(this._scale);
                    break;
                default:
                    break;
                }
            }

添加刻度线(5)或您想要的任何数字。

答案 2 :(得分:0)

只用CSS而没有JS可以达到相同的结果:

#your-graph .dimple-axis-x {
  g.tick text {
    opacity: 0;
  }

  g.tick:nth-child(10n) text {
    opacity: 1;
  }
}