javascript - 为什么 jqplot 会这样？

Question

我有一个由 4 个系列组成的图表。四个中的三个是堆叠条形图，第四个是一条线。为什么图形会这样？我认为我在系列中传递给$.jqPlot函数的顺序无关紧要。我认为您可以通过使用该series属性来调整您的系列，并为您不想调整的对象提供一个空对象。

scoreArray 是我想成为一个折线图的系列，我想覆盖在条形图上。我的第一次尝试是使用以下代码：

$.jqplot("HistoryChart",
    [scoreArray, AvailableArray, UnavailableArray, UnknownArray], {
        stackSeries: true,
        seriesDefaults : {
            renderer: $.jqplot.BarRenderer,
            rendererOptions : {
                barWidth: 40
            }
        },
        series : [{
            disableStack : true,
            renderer: $.jqplot.LineRenderer
        }, {}, {}, {}],
        axesDefaults : {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                angle: -45
            }
        },
        axes: {
            xaxis : {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: dateArray
            }
        }
    }
);

这是生成的图表：

现在，如果我将 scoreArray 作为最后一个系列并相应地调整了系列属性，它看起来是正确的。这是代码和图表：

$.jqplot("HistoryChart",
    [AvailableArray, UnavailableArray, UnknownArray, scoreArray], {
        stackSeries: true,
        seriesDefaults : {
            renderer: $.jqplot.BarRenderer,
            rendererOptions : {
                barWidth: 40
            }
        },
        series : [{}, {}, {}, {
            disableStack : true,
            renderer: $.jqplot.LineRenderer
        }],
        axesDefaults : {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                angle: -45
            }
        },
        axes: {
            xaxis : {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: dateArray
            }
        }
    }
);

Answer 1

对我来说似乎更像是一个错误。您尚未设置 y 轴 min-max，这会扭曲轴的初始设置。尝试设置最小值。它可能有效

Answer 2

该选项disableStack: true应该从该系列开始一个新的堆叠图。当您将它放在第一个示例的第一个条形图上时，您会得到相同的图表。查看修改后的代码：

.jqplot("HistoryChart",
[scoreArray, AvailableArray, UnavailableArray, UnknownArray], {
    stackSeries: true,
    seriesDefaults : {
        renderer: $.jqplot.BarRenderer,
        rendererOptions : {
            barWidth: 40
        }
    },
    series : [{
        renderer: $.jqplot.LineRenderer
    }, 
    {
        disableStack : true
    }, {}, {}],
    axesDefaults : {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -45
        }
    },
    axes: {
        xaxis : {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: dateArray
        }
    }
}
);

但这似乎不起作用：

似乎不支持在条形图上调用它。=

因此，使其工作的唯一方法是将线系列添加为最后一个系列并添加disableStack : true这些线系列。