javascript - Flot 条形图 - 如何创建非叠加值

Question

我是飞行新手。我有这个条形图:

这是我使用的代码:

$.getJSON('chartBar.json', function(graphDataBar){

    $.plot($('#graph-bars'), graphDataBar, {
        series: {
            bars: {
                show: true,
                barWidth: .1,
                align: 'right'


            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: 'transparent',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            tickColor: 'transparent',
            ticks: [[6,'Week 48'],[7,'Week 49'],[8,'Week 50'],[9,'Week 51'],[10,'Week 52']],
            min: 5.5,
            max: 10.5,
            mode: 'time',
         timeformat: "%b %d",
         minTickSize: [1, "day"],
         tickSize: [1, "day"],
         autoscaleMargin: .10
        },
        yaxis: {
            tickSize: 5
        }
    });

我尝试使用 x 轴内的属性，但似乎没有任何帮助。我知道有一种方法可以做到这一点，我见过类似 This 的例子一。但这似乎不起作用。我在这里想要成功的是这个

我还在 Stackoverflow 上看到过其他示例，例如 This但还是没有成功。我不确定我是否以错误的方式看到了这一点，或者我是否需要使用时间戳才能使其工作，但我这样做的方式是错误的。

有人可以向我解释一下这个解决方案是如何工作的吗？我想了解它以用于将来的条形图

提前谢谢

Answer 1

我假设 JSON 数据与您的其他问题 here 中的数据相同。如果情况并非如此，我们深表歉意。

我创建了一个 fiddle here使用以下 JSON 数据演示“非堆叠条”:

[
    {       
        "data": [ [6, 520], [7, 600], [8, 850], [9, 900], [10, 300] ],
        "color": "#F02626",
        "points": {  "fillColor": "#F02626", "radius": 6 },
        "lines": { "fillColor": "#CCF8FF"}
    }, 
    {
        "data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ],
        "color": "#26F041",
        "points": { "radius": 10, "fillColor": "#26F041" }
    }, 
    {
        "data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ],
        "color": "#20AEFA",
        "points": { "radius": 6, "fillColor": "#20AEFA"}
    }
]

这使用 orderBars plugin 。让条形图并排显示(而不是垂直显示)的关键是将 series.bars.order 属性设置为 1:

series: {
    bars: {
        ...
        order: 1
    }
},