方线图/步骤图jqplot

Question

我需要绘制3个系列的数据，第一个是一行，另外两个只是点。然而，该线应该是一个步骤图（而不是点到点的线条图，它应该画线水平然后直到值

我对如何使用JQPlot感到困惑。

$(document).ready(function(){
    var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

上面的代码会在下图中产生蓝线，而我需要绿线。

Answer 1

不幸的是，我不被允许发表评论。因此，我必须写一个新答案。

已经给出的答案建议从x值中减去少量（本例中为0.001）以防止三角效应。但这不太准确，只能被视为解决方法。

三角效应是由jqPlot执行的排序引起的。大多数图表类型都需要排序，包括折线图。如果在将数据提供给jqPlot之前已对数据进行了排序，则可以通过将sortData属性设置为false来禁用jqPlot的排序，请参阅print_r($myArray)

这样可以防止排序问题，因此不会出现三角效应！

你可能还想隐藏点标记，因为jqPlot并不知道真实点和我们注入的人工点之间的差异。

var data = [3, 7, 9, 1, 4, 6, 8, 2, 5];
var points = [[1, data[0]]];
for (var i = 1; i < data.length; i++) {
    points.push([i + 1, data[i - 1]]);
    points.push([i + 1, data[i]]);
}

var plot1 = $.jqplot('chart1', [points], {
    sortData: false,
    seriesDefaults: {
        showMarker: false
    }
});

jqPlot.sortData

如果你想得到正确的点标记，我看到的唯一选择是更改渲染逻辑，例如编写步骤图插件。

供参考，另请参阅以下帖子中的答案：Try it in a fiddle

Answer 2

您需要为图表上的每个点指定x和y值。棘手的是，如果两个点具有相同的x值，jqplot可以反转它们，它们看起来像一个三角形图而不是一个正方形。因此，解决方案是在第一个点之后取每个点，从x值中减去一小部分（在我的示例中，0.001），并将该值作为与之前的点具有相同y值的新点。 。这是一个硬编码的例子：

var plot1 = $.jqplot ('chart1', [[
    [1,3],  [1.999,3],
    [2,7],  [2.999,7],
    [3,9],  [3.999,9],
    //...
]]);

Try it in a fiddle

要在代码中创建这样的列表，只需遍历原始数据集并添加必要的额外步骤：

var data = [3,7,9,1,4,6,8,2,5];
var points = [[1, data[0]]], len = data.length;
for (var i = 1; i < len; i++) {
    points.push([i + .999, data[i - 1]]);
    points.push([i + 1, data[i]]);
}

var plot1 = $.jqplot ('chart1', [points]);

Try it in an updated fiddle