标签: rickshaw

我正在使用人力车(基于d3.js)来绘制堆积的条形图.问题是第一个栏通常比其他栏更高,破坏了视觉反馈.

使用对数标度(我猜)这里不是一个选项,因为那时条形图中堆栈之间的比例会被破坏.我想引入一个横向中断,如下图所示:

但是,我找不到Rickshaw或d3.js的任何开箱即用的功能来做这样的事情.有关如何制作一个的任何建议？

我想知道是否实际上对数据点上的onclick事件提供了开箱即用的支持,或者我必须修改库以使其工作.我扫描了源代码的某些部分,但没有看到任何允许绑定自定义单击操作的内容.他们网站上的教程也没有显示此选项(http://code.shutterstock.com/rickshaw/).

任何帮助都是值得赞赏的.我目前正在评估flot,人力车和flotr2.到目前为止,它们都没有满足所有要求,我很惊讶除了flot之外,其他库中没有自定义onClick事件的选项.我看到有些人为flotr2添加了一些黑客方法,但它只对条形图非常具体.

我正在创建一个Rickshaw.js驱动的图形,就像在这个例子中一样:http://code.shutterstock.com/rickshaw/tutorial/example_07.html基于我自己的数据,通过AJAX调用返回.数据以字节为单位(典型值范围为几千兆字节或几百MB)或秒(10到50分钟之间).我尝试使用Rickshaw.Fixtures.Number.formatBase1024KMGTP格式化程序来表示字节,然后在秒钟内编写自己的格式化程序.问题是我需要以智能的方式定位刻度线 - 最好是动态的,但即使是静态设置(例如每次1024*1024*1024=1 GB或每次都打勾60 s)也没关系.

我尝试设置tickSize到1024^3像这样:

var y_axis = new Rickshaw.Graph.Axis.Y({
    graph: graph,
    tickSize: 1073741824 // 1 GB
});
y_axis.render();

但我最终看不到任何嘀嗒声.我做错了什么,什么是正确的方法？

我有一条有两条线的人力车图.

我需要Rickshaw.Graph.RangeSlider.Preview和Rickshaw.Graph.HoverDetail:

var graph = new Rickshaw.Graph( {
    element: document.getElementById('chart'),
    renderer: 'line',
    width: 400,
    height: 300,
    offset: 'value',
    series: [
        {
            name: 'foo',
            data: seriesData.shift(),
            color: 'rgba(255, 0, 0, 0.4)'
        }, {
            name: 'bar',
            data: seriesData.shift(),
            color: 'rgba(255, 127, 0, 0.4)'
        }
    ]
} );

var slider = new Rickshaw.Graph.RangeSlider.Preview({
    graph: graph,
    element: document.getElementById('preview')
});

var detail = new Rickshaw.Graph.HoverDetail({
    graph: graph
});

graph.render();

http://jsfiddle.net/nsams/1jfswzp5/3/

我的问题

我现在的问题是,悬停显示在无效位置:

到目前为止我发现了什么:

• 删除RangeSlider.Preview修复问题
• 将渲染器更改为"堆栈"可以解决问题(即使使用线渲染器,看起来像悬停在堆栈位置)

我正在使用人力车创建一个实时更新的时间序列图.

这是演示:http://abhshkdz.github.io/icuvisualanalytics/prototypes/rickshaw.html

数据采用csv格式(时间,值),这是可视化的核心javascript:

var count = 0, index=0;

var margin  =   {top: 10, right: 10, bottom: 10, left: 10},
    width   =   window.innerWidth - margin.right - margin.left - 100,
    height  =   window.innerHeight - margin.top - margin.bottom - 100;

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: width,
    height: height,
    renderer: 'line',
    min: -300,
    max: 500,
    preserve: true,
    series: new Rickshaw.Series.FixedDuration(
        [
            {
                name: 'ECG',
                color: palette.color()
            }
        ], 
        undefined,
        {
            timeInterval: 12.5,
            maxDataPoints: 400,
            timeBase: …

我有一个成对的数据集,{x: someValue, y: count}其中someValue是一周中的某一天,形式为(1..7),其中1是"星期日".在Ricskshaw图表上,我想分别在X轴上显示(Mon,Tue ..etc).我怎么做？

目前我做了:

var ticksTreatment = 'glow';
var xAxisQPerDay = new Rickshaw.Graph.Axis.Time( {
          graph: graphQPerDay,
          ticksTreatment: ticksTreatment
      } );
xAxisQPerDay.render();

但这当然给了我默认值1s,2s,3s等......

我想显示"今天"的基于时间的数据的线性图表.在中午,由于系列不包含更多数据,因此只会填充图表的一半.如何让人力车显示完整的图表而不仅仅是现有数据的时间范围？

我有大多数值在41-44范围内的数据,但有时会出现150-350的峰值,因此y轴会自动缩放到0-350,图表根本不可读.

如何设置y轴的固定最小值和最大值？我知道有些值会"高于"图表,但这不是问题.

这是我的图表

编辑:或者我想在这个图表中启用放大甚至更好,任何想法如何做到这一点？

编辑2:或者你可以建议其他简单的图表库,启用/禁用行,缩放和平移？

我有一组日期数据.我应该提供X轴值的值是多少？如何让人力车将X数据值显示为日期？

我环顾了文档和示例,找不到任何东西.

我正在尝试使用人力车在我们的JS应用程序中显示数据,但y轴有时会被截止:

我尝试了几种"显示:可见"的变体,但似乎没有任何效果.你知道怎么解决这个问题吗？(即显示全部"100美元")？