Question

我想使用结合线条图和条形图的flotchart创建图表。我已经能够单独创建两个，但我在加入它们时遇到了问题。

这是我用来仅显示图表的代码：

    var dataset = [{ label: "Eficiencia", data: data }];

    var datasetSubtotal = [{ label: "Subtotal", data: dataSubtotal }]; // this has the data for the line I want to add.

    var placeholder = $("#chartdiv");

    var options = {
        series: {
            bars: {
                show: true
            },
        },
        bars: {
            align: "center",
            barWidth: 0.5
        },
        legend:
            {
                noColumns: 0,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
        xaxis: {
            axisLabel: "Operadores",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            ticks: ticks,
        },
        yaxis: {
            axisLabel: "Eficiencia por fuente",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
            min:0, max: 100,  tickSize: 5
        },
        grid: {
            hoverable: true,
            borderWidth: 2,
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        },
        margin: {
            top: 40,
            left: 10,
            bottom: 10,
            right: 10,
        }
    };

    $.plot(placeholder, dataset, options);

我也尝试过以不同的方式绘制它，但它总是每次只获得一个图形，或者两者都使用相同的数据。这是一个失败的例子。

    $.plot(placeholder, datasetSubtotal, { lines: { show: true } });

    $.plot(placeholder, [
        {
            data: datasetSubtotal,
            lines:{show:true, steps:true}
        },
        {
            data: dataset,
            bars:{show:true}
        }
    ],options);

Answer 1

检查Data Format上的文档，特别是如何设置系列对象。

您需要将一个系列配置为行，另一个配置为条：

var dataset = { 
    label: "Eficiencia", 
    data: data, 
    lines: {
        show: false
    },
    bars: {
        show: true
    }
 };

 var datasetSubtotal = { 
    label: "Subtotal", 
    data: dataSubtotal , 
    lines: {
        show: true
    },
    bars: {
        show: false
    }
 };

然后删除：

series: {
    bars: {
       show: true
    },
},

来自你的选择。

并用：

绘图

$.plot(placeholder, [dataset, datasetSubtotal], options);

这是一个小提琴demonstration。

Flotchart发布连接条形图和折线图

1 个答案: