javascript - 如何为 jqPlot 中的特定数据系列设置 Stack Series false

Question

我在我的一个项目中使用 jqPlot 图表。

我正在创建如下所示的图表。

/image/p8QiA.jpg

图表工作正常，但折线图值不应堆叠。但是，在我的代码中，线系列值也会堆积起来。

例如:总体而言，堆叠条形图值为 10，折线图值为 50。但是，在我的场景中，折线图值绘制在位置 60 而不是 50。

我的代码如下。

plot = $.jqplot(chartId, [d1, d2, d3], {
        seriesColors: ["#d82b25", "#707b7f", "#083a6d"],
        title: titles,
        stackSeries: true,
        animate: true,
        animateReplot: true,
        cursor: {
            style: 'pointer',
            show: true,
            zoom: false,
            looseZoom: false,
            showTooltip: false
        },
        series:[
            {
                pointLabels: {
                    show: false
                },
                renderer: $.jqplot.BarRenderer,
                showHighlight: true,
                yaxis: 'yaxis',
                rendererOptions: {
                    animation: {
                        speed: 2500
                    },
                    barWidth: 12,
                    barPadding: 20,
                    barMargin: 0,
                    highlightMouseOver: false
                }
            },
            {
                pointLabels: {
                    show: false
                },
                renderer: $.jqplot.BarRenderer,
                showHighlight: true,
                yaxis: 'yaxis',
                rendererOptions: {
                    animation: {
                        speed: 2500
                    },
                    barWidth: 12,
                    barPadding: 20,
                    barMargin: 20,
                    highlightMouseOver: false
                }
            },
            {
                yaxis: 'y2axis',
                rendererOptions: {
                    animation: {
                        speed: 2000
                    }
                },
                markerOptions: {
                    show: false
                }
            }
        ],
        legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            rendererOptions: {
                numberRows: 2
            },
            location: 's',
            placement: 'outside',
            labels: types,
            yoffset: 52
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            labelOptions: {
                fontFamily: 'Arial, sans-serif',
                fontSize: '10pt'
            },
            tickOptions: {
                fontFamily: 'Arial, sans-serif',
                fontSize: '10pt'
            },
            pad: 0
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                drawMajorGridlines: false,
                tickOptions:{
                    renderer: $.jqplot.CategoryAxisRenderer, 
                    angle:-90
                }
            },
            yaxis: {
                showGridline: false,
                tickOptions: {
                    formatString: "%.1f"
                },
                rendererOptions: {
                    forceTickAt0: true
                },
                label:'Volume($ Billions)',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            },
            y2axis: {
                showGridline: false,
                tickOptions: {
                    show: true,
                    formatString: "%.1f"
                },
                rendererOptions: {
                    alignTicks: true,
                    forceTickAt0: true
                },
                label:'US($ Millions)',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            }
        },
        grid:{
            background: '#ffffff',
            borderColor: '#333333',
            borderWidth: 1.0,
            gridLineColor: '#575757'
        },
        highlighter: {
            show: true, 
            showLabel: true, 
            tooltipAxes: 'y',
            sizeAdjust: 7.5,
            tooltipLocation : 'ne'
        }
    });

请有人帮我解决这个问题。

提前致谢...

Answer 1

如果查看jqPlot框架的源代码并搜索stackSeries行，您可以发现它是这样使用的:

if (this.stackSeries && !series.disableStack)

根据documentation disableStack 属性就是您所需要的。

true to not stack this series with other series in the plot. To render properly, non-stacked series must come after any stacked series in the plot’s data series array.

您的线非堆叠系列放置在条形堆叠系列之后，因此此参数将正常工作。这样使用它:

series:[
    { //...
    },
    { // ...
    },
    {
        disableStack: true,
        yaxis: 'y2axis',
        rendererOptions: {
            animation: {
                speed: 2000
            }
        },
        markerOptions: {
            show: false
        }
    }
]