标签: linechart

FIDDLE <<<<这里有比问题更新的代码.

我试图在d3中创建一个实时(实时更新)时间序列图表,也可以平移(在X中)和缩放.理想情况下,我想要的功能是,如果用户可以看到该行的最右侧部分,那么当新数据添加到图表时,它将自动横向平移以包含新数据(不更改轴刻度).

我的d3.json()请求应返回如下所示的JSON数组:

[{"timestamp":1399325270,"value":-0.0029460209892230222598710528},{"timestamp":1399325271,"value":-0.0029460209892230222598710528},{"timestamp":1399325279,"value":-0.0029460209892230222598710528},....]

当页面首次加载时,我发出请求并获取到目前为止所有可用的日期,并绘制图表 - 很简单.下面的代码执行此操作,它还允许平移(在X中)和缩放.

var globalData;
var lastUpdateTime = "0";
var dataIntervals = 1;

var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = document.getElementById("chartArea").offsetWidth - margin.left - margin.right,
    height = document.getElementById("chartArea").offsetHeight - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10)
    .tickFormat(d3.time.format('%X'))
    .tickSize(1);
    //.tickPadding(8);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var valueline = d3.svg.line()
    .x(function (d) { …

我想用rCharts的NVD3 lineChart图使用area = true选项绘制不同种群的分布,如http://nvd3.org/examples/line.html.

我在这里工作:

require(devtools)
install_github('ramnathv/rCharts')
require(rCharts)

df<-data.frame(X=rep(1:4,2),Y=1:8,fil=c(rep("A",4),rep("B",4)))

denp <- nPlot(Y ~ X, group = 'fil', data = df, type = 'lineChart')
denp$chart(color =c('#ff7f0e', 'blue', 'green'))
denp$yAxis(axisLabel= 'Density')
denp$xAxis(axisLabel= 'Value')
denp$chart(margin = list(left=80,bottom=80))
denp$yAxis(tickFormat = "#!function (x,y,e) { return }!#")
denp$xAxis(tickFormat = "#!function (x,y,e) { 
tickformat = ['0,01','0,1',1,10,100,1000,10000,'100k'];
return tickformat[x+2];}!#")
denp$chart(tooltipContent = "#! function(key, val, e, graph){
return '<h3>' + '<font color=blue>'+ key +'</font>'+ '</h3>' + '<p>'+ val } !#")

denp

我发现的问题是我无法将area参数切换为true.我试过了:

denp$chart(area=TRUE)
denp$chart(area=c(TRUE,TRUE,TRUE))
denp$chart(area=c('true'))
denp$chart(area=c('true','true','true'))
denp$chart(area=c('#!true!#')) …

上次我询问如何计算每个测量时间(周)的平均分数,对于多个受访者重复测量的变量(procras).所以我的(简化)长格式数据集看起来像下面的例子(这里有两个学生,5个时间点,没有分组变量):

studentID  week   procras
   1        0     1.4
   1        6     1.2
   1        16    1.6
   1        28    NA
   1        40    3.8
   2        0     1.4
   2        6     1.8
   2        16    2.0
   2        28    2.5
   2        40    2.8

使用dplyr我会得到每个测量场合的平均分数

mean_data <- group_by(DataRlong, week)%>% summarise(procras = mean(procras, na.rm = TRUE))

看起来像这样:

Source: local data frame [5 x 2]
        occ  procras
      (dbl)    (dbl)
    1     0 1.993141
    2     6 2.124020
    3    16 2.251548
    4    28 2.469658
    5    40 2.617903

使用ggplot2,我现在可以绘制随时间的平均变化,并通过轻松调整dplyr的group_data(),我也可以获得每个子组的平均值(例如,男性和女性的每次平均得分).现在我想在mean_data表中添加一个列,其中包括每个场合平均得分95%-CIs的长度.

http://www.cookbook-r.com/Graphs/Plotting_means_and_error_bars_(ggplot2)/解释了如何获取和绘制CI,但这种方法似乎一旦我想为任何子组执行此操作就会出现问题,对吧？那么有没有办法让dplyr在mean_data中自动包含CI(基于组大小等)？之后,将新值作为CI绘制到我希望的图表中应该相当容易.谢谢.

我使用D3创建了一个小测试线图,但由于我对库很新,我不确定在图表中添加多行是最好的方法,目前我只有一行显示小提琴.

我想在图表上显示2行,但我不确定如何在没有复制粘贴代码的情况下实现这一点,我相信这将是非常低效的,因为我想根据用户选择定期更新/动画图形.

而不是这个,

var data = [12345,22345,32345,42345,52345,62345,72345,82345,92345,102345,112345,122345,132345,142345];

我想展示这样的东西,

var data = [
            [12345,42345,3234,22345,72345,62345,32345,92345,52345,22345], // line one
            [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] // line two
          ];

这可能吗？如果是这样,那么最好的方法是什么,以便我可以在需要时轻松更新/动画图形？

注意:我只是想学习并熟悉D3最佳实践和整个库.谢谢.

我是相对较新的D3,我无法弄清楚为什么有些东西不起作用..我想用d3绘制一个折线图,这很好用,但我的轴有问题.

使用以下代码在某处出错,我看不出如何解决...

var x = d3.scale.linear()
.range([0, width]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

x.domain(d3.extent(data, function(d) { return d.age; }));

如果d.age是一个整数(如1; 2; 3等),它运作良好.但我想在x轴上使用字符串.喜欢("荷兰","英格兰","比利时").

因此,如果d.age是一个整数,它会绘制图表,如果d.age是一个字符串,它不会绘制任何东西.

我也试过使用序数而不是线性,但这给出了一个不正确的图表.(奇怪的看起来......).

希望有人可以帮助我.

我想为我的简单line_chartin中的 x 和 y 轴添加标签streamlit。

绘图命令是

st.line_chart(df[["capacity 1", "capacity 2"]])

line_chart它用 2 条线（容量 1 和容量 2）绘制 a 。

是否有一个简单的命令来添加 x 和 y 轴标签（也许还有图表标题）？

我有一个谷歌折线图,我设置'curveType': 'function'所以图形是弯曲的,具有漂亮的外观.我的问题是,当数据点的值为0,后跟一个跟随的高值时,图表下降到0以下,以便曲线可以正确拟合.这也导致vAxis的minRange为-2000,这对我的数据来说是不可能的(随着时间的推移下载次数).

我试图通过设置'minValue': 0和'viewWindowMode': 'maximized'在vAxis上解决这个问题,但它还没有完全解决问题.

我附上了一张图片,可以用文字解释我的问题.

http://img41.imageshack.us/img41/7589/screenshot20121031at144.png

如果有人知道这个解决方案,没有我必须回到直线,我将非常感激.谢谢

我想把文字放在我在折线图上绘制的每个点上.

这就是我能做的:

这就是我需要的(点的名称是绿色):

我想触发当你从外部html按钮选择项目图例时触发的同一事件.可能吗？

我创建了一个jsfiddle来展示它:http://jsfiddle.net/YcJF8/1/ .

$('#container').highcharts({
                    chart : {
                        type : 'spline',
                    },

                    xAxis : {
                        categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },

                    series : [{
                        data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

                    }],

                    plotOptions : {
                        series : {

                        cursor : 'pointer',
                    }
                },
});

$('#button').click(function() {
        alert("Fire legenditemclick event");
});

在这个jsfiddle,我有一个按钮,我希望当我点击按钮时,它会触发一个事件或图表检测到的东西,并且单击了项目图例(系列1).

非常感谢你

我找不到有类似问题的人,没有线索解决我在阅读文档和其他问题时遇到的问题,所以我希望有人可以帮助我.

这是我的代码(从文档示例中复制)

var margin = {top: 20, right: 20, bottom: 30, left: 150},
width = document.getElementById("aapp_content_charts").clientWidth - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
.range([0, width]);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(3);

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var line = d3.svg.line()
.x(function(d) { return x(d3.time.year(parseDate(d[0]))); })
.y(function(d) { return y(d[1]); });

var svg = d3.select("#aapp_content_charts").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height …