使用Flot的线图是在Lapped [英] Line Graph using Flot is over Lapping

问题描述

我有以下选项用于图

<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>

但这会生成以下

a href =https://i.stack.imgur.com/7JYrM.jpg =nofollow noreferrer>

有任何方法使它堆叠，以便用户知道有第一行的内容

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.

推荐答案

将数据点的符号更改为两个不同的符号，在此图表中，您可以看到重叠：

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

符号功能：

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);
};

查看此 fiddle 完整示例。

这篇关于使用Flot的线图是在Lapped的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！