【问题标题】:dimple js x-axis date issue with bar chart带有条形图的酒窝js x轴日期问题
【发布时间】:2014-04-10 13:46:37
【问题描述】:

我在 x 轴上的条形图条添加到正确的位置,但 x 轴刻度在酒窝 js 中重复了月份和年份。由于此数据中只有三个值,如何调整 x 轴?这是 jfiddle:http://jsfiddle.net/Ra2xS/17/

有什么建议吗?

var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];


function barplot(id,dim,data)
{
    keys = Object.keys(data[0]);
    var xcord = keys[0];
    var ycord = keys[1];
    var svg = dimple.newSvg(id, dim.width, dim.height);

    var myChart = new dimple.chart(svg,data);
    myChart.setBounds(60, 30, 505, 305);        

    //var x = myChart.addCategoryAxis("x", xcord);
    var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y");
    x.addOrderRule(xcord);
    x.showGridlines = true;

    var y = myChart.addMeasureAxis("y", ycord);
    y.showGridlines = true;
    y.tickFormat = ',.1f';    

    var s = myChart.addSeries(null, dimple.plot.bar);
    var s1 = myChart.addSeries(null, dimple.plot.line);
    s1.lineWeight = 3;
    s1.lineMarkers = true;

    myChart.draw(1500);

}

barplot("body",dim,data);

【问题讨论】:

  • 他们怎么在错误的位置?
  • 让我编辑帖子。我的意思是 x 轴顺序搞砸了..

标签: javascript jquery d3.js data-visualization dimple.js


【解决方案1】:

您可以通过将轴的时间段设置为月来防止多余的刻度/标签:

x.timePeriod = d3.time.months;

完整的演示here

【讨论】:

  • 谢谢。现在酒吧是如此分开,酒吧的大小也需要改变。有什么解决办法吗?
  • 为了抢占您的下一个问题,您可以通过以下方式自动设置最大和最小范围以考虑条形宽度:jsfiddle.net/Ra2xS/26
  • 这仅适用于 3 个数据值。然而,在我的例子中,数据是动态更新的,更多的数据会弄乱图表,这里是小提琴:jsfiddle.net/Ra2xS/31
  • 可以根据数据量动态设置:jsfiddle.net/Ra2xS/32
猜你喜欢
  • 2014-05-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-20
相关资源
最近更新 更多