0

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

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

提前致谢...

4

1 回答 1

2

如果查看jqPlot框架的源码，搜索stackSeriesline，可以发现是这样使用的：

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

根据文档，该disableStack属性是您所需要的。

true 不将该系列与情节中的其他系列堆叠。要正确渲染，非堆叠系列必须位于绘图数据系列数组中的任何堆叠系列之后。

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

series:[
    { //...
    },
    { // ...
    },
    {
        disableStack: true,
        yaxis: 'y2axis',
        rendererOptions: {
            animation: {
                speed: 2000
            }
        },
        markerOptions: {
            show: false
        }
    }
]
于 2013-11-13T23:15:05.590 回答