Question

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

我正在创建与下面相同的图表。

http://i.stack.imgur.com/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。要正确渲染，非堆叠系列必须在绘图的数据系列数组中的任何堆叠系列之后。

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

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

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

1 个答案: