使用flot js绘制两个图表时获得额外的颜色

Question

这是我的代码

<div id="chart-revenue3" style="width:1100px; height:480px;" > </div>


         var series = [{
                data: [
                    [0, 100],
                    [1, 150],
                    [2, 125],
                    [3, 160],
                    [4, 95]
                ],
                label: "Generes",
                color:"#4598AE"
            },
            {
                data: [
                    [0, 104],
                    [1, 157],
                    [2, 178],
                    [3, 145],
                    [4, 78]], 
                label: "Playlists",
                color:"#8AA453"
            }, {
                data: [
                    [0, 55],
                    [1, 40],
                    [2, 60],
                    [3, 10],
                    [4, 20]
                ],
                label: "Home",
                color:"#A84745"
            }, {
                data: [
                    [0, 55],
                    [1, 40],
                    [2, 60],
                    [3, 10],
                    [4, 20]
                ],
                label: "Search",
                color:"#D98445"
            }, {
                data: [
                    [0, 55],
                    [1, 40],
                    [2, 60],
                    [3, 10],
                    [4, 20]
                ],
                label: "New and Hot",
                color:"#71598E"
            },
            {
              data: [
                    [0,150],
                    [1, 200],
                    [2, 250],
                    [3, 120],
                    [4, 90]
                ],
              label: "# Venues",
              points: { show: false },
              lines: { show: true,fill: false},
              yaxis: 2,
              color:"#81A0C1"
            }];

            var options = {
                xaxis: {
                    minTickSize: 1,
                    ticks: [[0,'Dafault'],[1,'Alternative'],[2,'Country'],[3,'Latin'],[4,'Rock']]
                }, yaxes: [
                        {                               
                        },
                        {                   
                            position: "right" , min:0, max: 1200,  tickSize: 200
                        }
                    ], 
                series: {
                    bars: {
                        show: true,
                        barWidth: .3,
                        align: "center",fillColor: {
                                            colors: [{ opacity: 1 }, { opacity: 1 } ]
                                        }                           
                    },
                    stack: true,
                    shadowSize:1
                },
                legend: { show: true, container: '#chart-revenue3-table' }
            };

            $.plot("#chart-revenue3", series, options);

因此，如果我运行此代码，我会在条形图上获得一些额外的颜色。请给出任何想法

Answer 1

好的，现在我明白你要做什么了。你缺少的是你需要告诉flot不要将# Venues系列作为条形图：

{
    data: [
        [0, 150],
        [1, 200],
        [2, 250],
        [3, 120],
        [4, 90]
    ],
    label: "# Venues",
    points: {
       show: false
    },
    lines: {
       show: true,
       fill: false
    },
    yaxis: 2,
    bars: {
       show: false             // <-- this is the bit you were missing
    },
    color: "#81A0C1"
}

http://jsfiddle.net/BrEJm/6/

您需要执行此操作的原因是因为您设置了options：

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

flot的工作方式是它将这些默认的系列选项集与你为每个系列设置的任何显式选项合并。因此，即使您未指定，您的所有系列都会继承bars.show = true。