我在我的项目之一中使用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'
        }
    });


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

提前致谢...

最佳答案

如果查看jqPlot框架的源代码并搜索stackSeries行,您会发现它的用法如下:

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


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


  如果不将此图系列与图中的其他系列叠加,则为true。为了正确渲染,非堆叠序列必须位于绘图数据序列阵列中的任何堆叠序列之后。


您的非堆叠线系列放置在钢筋堆叠系列之后,因此此参数将正常工作。如此使用:

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

关于javascript - 如何为jqPlot中的特定数据系列设置Stack Series false,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19946952/

10-12 12:39
查看更多