Question

我有以下选项用于图表

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

但这会产生以下内容

有没有办法让它堆叠，以便用户知道第一行的内容也实际上与顶线相反。

Answer 1

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

符号功能：

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的折线图重叠

1 个答案: