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

标签 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}
        }
    }
});

最佳答案

我相信使用 highchart 会更容易实现:http://www.highcharts.com/demo/column-stacked

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

祝你好运

关于javascript - 是否可以使用 jqplot 制作此图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20375719/

相关文章:

html - 如何创建链接标签云

javascript - 为什么 JavaScript 输出 16384 而不是 040000?

javascript - Redux Toolkit - 'AsyncThunkAction<>' 类型的参数不可分配给 'AnyAction' 类型的参数

javascript - 更改 Accordion 折叠时的图标方向

javascript - 如何使用 Bootstrap 单击可点击模态 div 内的模态按钮

jquery - 事件发生后输入框的 keypress、keydown、keyup 值

html - Twitter Bootstrap 崩溃是如何工作的?

javascript - 创建对象时函数关键字是可选的吗?

javascript - 在 javascript 中解析 m3u8 正则表达式

javascript - 根据数组中的小时计算日期的出现次数