javascript - Flotcharts : draw point with different colors, 相同的数据系列

Question

我正在尝试从 1 个系列中绘制一个包含 1440 个点(24 小时)的图表，每个点都有自己的颜色。我能够用钩子(Hook)画它，描述了 here ，但我的边框和阴影越来越难看了。我也无法填充 x 轴和直线之间的空间。Plot 也不会读取这些选项:

var plot = $.plot(
        $('.LCGraph'),[
            {
                data: d2, 
                points: {
                    show: true
                }
            }
        ],{
            grid: {
                 hoverable: false,
                 clickable: false,
                 borderWidth: {
                             top: 0.1, 
                             right: 0.1, 
                             left: 0.1, 
                             bottom: 0.1
                         },
                 borderColor: {
                             top: "#AAAAAA", 
                             left: "#AAAAAA", 
                             right:"#AAAAAA",
                             bottom:"#AAAAAA"
                         },
        },  
            bars: {
                show: false
            },
            xaxis: {
                show: true
            },
            hooks: {
                draw: [raw]
            }
        });

我该如何解决这个问题？

附言使用了这个钩子(Hook):

$(function () {

  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
  var radius = [10, 20, 30, 40];

  function raw(plot, ctx) {
    var data = plot.getData();
    var axes = plot.getAxes();
    var offset = plot.getPlotOffset();
    for (var i = 0; i < data.length; i++) {
        var series = data[i];
        for (var j = 0; j < series.data.length; j++) {
            var color = colors[j];
            var d = (series.data[j]);
            var x = offset.left + axes.xaxis.p2c(d[0]);
            var y = offset.top + axes.yaxis.p2c(d[1]);
            var r = radius[j];                
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2,true);
            ctx.closePath();            
            ctx.fillStyle = color;
            ctx.fill();
        }    
    }
  };  

    var plot = $.plot(
          $("#placeholder"),
          [{ data: d2, points: { show: true } }],
          { hooks: { draw  : [raw] } }
  );  
});

Answer 1

以防万一有人寻找解决方案。

我已经覆盖了手动绘制 X 轴线的钩子(Hook)。

function raw(plot, ctx) {
    var data = plot.getData();
    var axes = plot.getAxes();
    var offset = plot.getPlotOffset();
    var bottom = axes.yaxis.p2c(0)+offset.top;
    for (var i = 0; i < data.length; i++) {
        var series = data[i];
        for (var j = 0; j < series.data.length; j++) {
            var color = colors[j];
            var d = (series.data[j]);
            var x = offset.left + axes.xaxis.p2c(d[0]);
            var y = offset.top + axes.yaxis.p2c(d[1]);
            var r = 0.9;
            ctx.lineWidth = 0.4;
            ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.arc(x,y-r,r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fillStyle = color;
            ctx.fill();
            ctx.shadowSize = 0;
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineTo(x, bottom);
            ctx.stroke();
            ctx.closePath();
            ctx.fill();
        }
    }
}

也许可以对其进行优化，但它可以正常工作。为了防止 flot 出现这种丑陋的颜色，我更改了 plot 的选项以隐藏实际图形:

var plot = $.plot(
        $('#graphContainer'),[
            {
                data: d2, 
                points: {
                    show: true
                }
            }
        ],{series:{
            shadowSize: 0,
            color: "rgba(0,0,0,0)",
            lines: {
                lineWidth: 0.1,
            fill: false,
                show: false,
                color: "rgba(0,0,0,0)"
            },
            points: {
                shadowSize: 0,
                lineWidth: 0.1,
                fill: false,
                show: false,
                color: "rgba(0,0,0,0)"
            }
        },
            grid: {
                 backgroundColor: "#F1F1F1",
                 hoverable: false,
                 clickable: false,
             borderWidth: {top: 0.1, right: 0.1, left: 0.1, bottom: 0.1},
             borderColor: {
                        top: "#AAAAAA", 
                        left: "#AAAAAA", 
                        right:"#AAAAAA",
                        bottom:"#AAAAAA"
                 },
            },
            bars: {
                show: false
            },
            xaxis: {
                show: true,
            },
            hooks: {
               draw: [raw]
            }
        }); 

因此，您需要包含数据的 d2 数组和包含每个点颜色的颜色数组。 d2 的长度和颜色应该相同。您还可以在 function raw(plot, ctx) 中更改 var r 和 ctx.lineWidth 的值以获得您想要的外观。