是否可以使用jqplot制作此图表?

时间:2013-12-04 12:42:07

标签: javascript jquery css jqplot

是否可以使用jqplot制作图形,如下所示?最接近的图表是stacked,但使用该着色以及点标签是个问题。

Expected Output

jsfiddle包含了我制作此条形图及其图例和点标签的努力。因此可以使它看起来像图像。

var barchart = $.jqplot('chart1', [s1, s2, s3], {
    animate: true,
    grid: {
        background: 'white',
        drawBorder:false,
        shadow: false
    },

    seriesColors: ['#73C6E8', '#F28570', '#727272'],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {
            barPadding: 20,
            barWidth: 25,
            barMargin:10,
            fillToZero: true
        },
        pointLabels: { show: true }
    },
    series: [
        { label: 'USA' },
        { label: 'India' },
        { label: 'South Africa' }
    ],
    legend: {
        show: true,
        placement: 'outsideGrid',
        location:'se',
        background:'white',
        border: 'white',
        fontFamily: 'Gotham Medium',
        fontSize:'12px',
        renderer: $.jqplot.EnhancedLegendRenderer
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks:xticks,
            showTicks:false
        },
        yaxis: {
            pad: 1.05,
            ticks: yticks,
            showTicks:false,
            rendererOptions: {drawBaseline: false}
        }
    }
});

1 个答案:

答案 0 :(得分:0)

我相信用高级图表来实现会更容易:http://www.highcharts.com/demo/column-stacked

这只是堆栈栏示例,您可以自定义所有内容,图例,颜色,大小,标签等。

祝你好运