Question

是否可以在Flotr2中更改点（线性图）的填充颜色？

我的代码：

<script>
    /* globals*/
    var lineColor = '#717171';
    var baseLineColor = '#a3d06e';
    var titleText = []; /* [title1, title2,...] */
    var xticks = [];  /* [ [0.9, ""], [1, "strValue1"], ..., [n, strValueN], [n+0.1, ""] ] */

    var title = document.getElementById('title');
    var data = [ /* the chart data */
        [1, 2],
        [2, 3],
        [3, 3],
        [4, 4],
        [5, 5],
        [6, 5],
        [7, 5],
        [8, 2],
        [9, 3],
        [10, 3],
        [11, 4],
        [12, 5],
        [13, 5],
        [14, 5],
        [15, 5],
        [16, 2],
        [17, 3],
        [18, 3],
        [19, 4],
        [20, 5],
        [21, 5],
        [22, 5],
        [23, 2],
        [24, 3],
        [25, 3],
        [26, 4],
        [27, 5],
        [28, 5],
        [29, 5],
        [30, 5],
    ];

    var container = document.getElementById('chart');


    /*Test - remove for real data*/
    for(var i=1; i<31; i++){
        xticks.push([i, ("label " + i)]);
        titleText[i] = "Title " + i;
    }

    /* chart options */
    var personal = { data : data, /* @data@ */
        lines : { show : true, fill : false, color: lineColor, lineWidth: 4},
        points : { show : true, color: lineColor, radius: 20, fillColor:'#ff0000'}
    };

    var baseline = { data: [[-50,3],[50,3]],
        mouse: {track: false},
        lines : { show : true, fill : false, color: baseLineColor, lineWidth: 4}
    }


    setTimeout(setDimentions, 300);



    function setDimentions(){
        var w = window.innerWidth * 0.8;
        var h = window.innerWidth * 0.45;
        container.style.width = w + "px";
        container.style.height = h + "px";

        drawChart();
    }

    function drawChart(){
        var f = Flotr.draw(container, [baseline, personal],
                {
                    resolution: 2, HtmlText: true,
                    xaxis : { ticks: xticks /* @xticks@ */, tickDecimals: true, min:0.8, max: (data.length+0.2)/*@xmax@*/ },
                    yaxis : { ticks: [1,2,3,4,5], tickDecimals: true, min:0.9, max: 5.1 },
                    mouse : { track : true, sensibility: 10, trackFormatter: showTitle}
                });
    }

    function showTitle(point){
        title.innerHTML = titleText[parseInt(point.x)];
    }

Answer 1

使用以下选项应该足够了：

  mouse : {
    track : true,
    relative : true,
    lineColor : '#FF00FF',
    fillColor : '#0000FF'
  },

我在这里放了一个演示： http://jsfiddle.net/93by5/1/

flotr2 - 点击时改变点颜色

1 个答案: