从相反的轴绘制图形堆栈

Question

我正在使用显示器，我不知道终点在哪里（100％是一个不断发展的数字......图表将通过ajax更新）。数据将完成记录的混合，而不是完成的估计计数。

随着时间的推移，计数会上升，估计的完成点会变得更紧。

不确定图片^是否有效...（大多数事情都被阻止了，抱歉）

作为水平条的ascii示例：

[///////40%////// ******SPACE*******/////20%//////]

我尝试过使用像

这样的数据

var rawData = [
    [40, 0], 
    [-20, 0], 
    ];

表示完成40％，潜在终点范围为20％。但这不起作用。在所有

var rawData = [
    [40, 0], 
    [20, 0], 
    ];

显示为60％的堆叠格式，这不是我想要的。

我可以在同一个“行”上堆叠两个条形，但不能从同一个轴堆叠吗？

Answer 1

创建3个条而不是2个，中间条填充剩余空间，最多100个。使用系列对象，这样您就可以将中间条分配为空的＆＃39;颜色，像白色。

因此，使用上面的例子，你有40和20，你的中间栏的值为100 - 40 - 20 = 40。

Answer 2

据我所知，没有办法将一个系列叠加在一起。说到这里我的5分钟尝试复制你的形象：

正如@DNS建议的那样，我使用transparent中间序列来区分完整/估计的条形图。为了更容易跟踪点所属的位置，我添加了每个栏，因为它是自己的系列。

小提琴是here。

var data = [];
// 10 passes
data.push({data:[[40,2]], color: 'green'});
data.push({data:[[40,2]], color: 'transparent'});
data.push({data:[[20,2]], color: 'silver'});
// 100 passes
data.push({data:[[50,1]], color: 'green'});
data.push({data:[[20,1]], color: 'transparent'});
data.push({data:[[30,1]], color: 'silver'});
// 1000 passes
data.push({data:[[70,0]], color: 'green'});
data.push({data:[[20,0]], color: 'transparent'});
data.push({data:[[10,0]], color: 'silver'});


$.plot($("#placeholder"), data, {
    series: {
        stack: true,
        lines: { show:false },
        bars: { show: true, horizontal:true, barWidth: 0.6 }
    },
    xaxis: {min: 0, max: 100, ticks: [[0, '<span style="color: green">Completed<br/>0%</span>'],[100, '<span style="color: gray">Estimated End Point<br/>100%</span>']]},
    legend: {show: false},
    yaxis: {tickColor: 'transparent',position: 'right',
            ticks: [[0.25,'as of 1000 passes'],
                    [1.25,'as of 100 passes'],
                    [2.25,'as of 10 passes']]}
});