Line Graph using Flot is over Lapping

问题

I have the following Options using for the Graph

<div ui-jq="plot" ui-options="
              [
                { data: [ [1,6.5],[2,6.5],[3,7],[4,8],[5,7.5],[8,7],[7,6.8],[8,7],[9,7.2],[10,7],[11,6.8],[12,7] ], points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 4, fill: 0 } },
                { data: [ [1,1.5],[2,2.5],[3,3],[4,4],[5,5.5],[6,7],[7,6.8],[8,7],[9,7.2],[10,7],[11,6.8],[12,7] ], points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 } }
              ],
              {
                colors: ['#23b7e5', '#1337e5'],
                series: { shadowSize: 3, stack: true },
                xaxis:{
                  font: { color: '#ccc' },
                  position: 'bottom',
                  ticks: [
                    [ 1, 'Jan' ], [ 2, 'Feb' ], [ 3, 'Mar' ], [ 4, 'Apr' ], [ 5, 'May' ], [ 6, 'Jun' ], [ 7, 'Jul' ], [ 8, 'Aug' ], [ 9, 'Sep' ], [ 10, 'Oct' ], [ 11, 'Nov' ], [ 12, 'Dec' ]
                  ]
                },
                yaxis:{ font: { color: '#ccc' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                tooltip: true,
                tooltipOpts: { content: '%x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } }
              }
            " style="height:240px" >
            </div>

But this generates the following

Is there any way to make it stack so that the user knows that there is content for the first line as well which actually bellow the top line.

回答1:

Changing the symbol for the datapoints to two different symbols gives this chart where you can see the overlapping:

Symbol functions:

function cross1(ctx, x, y, radius, shadow) {
    var size = radius * Math.sqrt(Math.PI) / 2;
    ctx.moveTo(x - size, y - size);
    ctx.lineTo(x + size, y + size);
    ctx.moveTo(x - size, y + size);
    ctx.lineTo(x + size, y - size);
};

function cross2(ctx, x, y, radius, shadow) {
    var size = radius * Math.sqrt(Math.PI) / Math.sqrt(2);
    ctx.moveTo(x - size, y);
    ctx.lineTo(x + size, y);
    ctx.moveTo(x, y + size);
    ctx.lineTo(x, y - size);
};

See this fiddle for the full example.

来源：https://stackoverflow.com/questions/38762745/line-graph-using-flot-is-over-lapping

标签

javascript

jquery

charts

flot