【问题标题】:Jquery - Flot, How can I only show points and not lines?Jquery - Flot,我怎样才能只显示点而不显示线?
【发布时间】:2010-07-16 14:33:16
【问题描述】:

好的开始我正在使用 Jquery-Flot 绘制径向图我找到了一个插件来创建蜘蛛图请参阅此处的 API:

http://www.jumware.com/Includes/jquery/Flot/Doc/JQuery.Flot.spider.html

现在它工作得很好,我不想显示连接点的线。 通常与:

points: { show: true}, lines: { show: false}

但是当使用蜘蛛插件时,它似乎忽略了这个设置。我在这里做错了什么还是使用这个插件时我必须显示线条?


工作示例:

http://jsfiddle.net/WAscC/2/


代码:

function EveryOneSec() {

    var d1 = [[0, 10], [1, 20], [2, 80], [3, 70], [4, 60]];
    var d2 = [[0, 30], [1, 25], [2, 50], [3, 60], [4, 95]];
    var d3 = [[0, 50], [1, 40], [2, 60], [3, 95], [4, 30]];

    var options = {
        series: {
            spider: {
                active: true,
                legs: {
                    data: ["", "", "", "", ""],
                    legScaleMax: 1,
                    legScaleMin: 0.8
                }, spiderSize: 0.9
            }
        }, grid: {
            hoverable: false,
            clickable: false,
            tickColor: "rgba(0,0,0,0.2)",
            mode: "radar"
        }
    };


    data = [{
        label: "",
        data: d1,
        spider: {
            show: true,
            lineWidth: 0
        }
    }, {
        label: "",
        data: d2,
        spider: {
            show: true,
            lineWidth: 0
        }
    }, {
        label: "",
        data: d3,
        spider: {
            show: true,
            lineWidth: 0
        },
        points: { show: true},lines: { show: false }
    }];

    $.plot($("#RadialPlot"), data, options);
}
EveryOneSec();

更新一个

lineWidth: 0, connectionWidth: 0 编辑为任何数字似乎对图表完全没有影响。


如何只显示点而不显示线?

【问题讨论】:

  • 用脚本玩了一下...如果你省略了蜘蛛选项它会起作用...有趣...
  • 哪些蜘蛛选项可以将其保留为没有插件的普通 flot?
  • 我的意思是整个spider:-section ...
  • 是的。如果它没有设置为蜘蛛图它可以工作:( fustraating.
  • 我相信这是spider-graph 的特性...我不相信扩展spider 和库之间的这种合作没有实现...见code.google.com/p/flot/issues/detail?id=138 (此扩展的原始请求)...您可能会去项目站点...

标签: javascript jquery jquery-plugins flot


【解决方案1】:

connection: { width: 0 } 添加到蜘蛛选项:

spider: {
   active: true,
   connection: { width: 0 }, // add this line
   legs: {
       data: ["", "", "", "", ""],
       legScaleMax: 1,
       legScaleMin: 0.8
   },
   spiderSize: 0.9
}

Documentation 声明选项应该是:connectionWidth: 0,但从source for the actual plugin 可以看出,这似乎已经改变:

function drawspiderConnections(ctx,cnt,serie,c,fill) {
    var pos,d;
    ctx.beginPath();
    ctx.lineWidth = serie.spider.connection.width; // this is the line

    // etc.

}

【讨论】:

  • 我尝试在下面的 spiderSize 中添加它不起作用:S 完全按照您所做的那样做。谢谢你好先生。
猜你喜欢
  • 1970-01-01
  • 2021-11-05
  • 1970-01-01
  • 1970-01-01
  • 2019-04-20
  • 2020-07-18
  • 1970-01-01
  • 2018-10-26
  • 2021-11-27
相关资源
最近更新 更多