javascript - jqplot 在图上标记一个点

标签 javascript jqplot

我有一个包含两条线(一条水平线和一条抛物线)的图形,我想显示交叉点的值并用文本“MSY”标记它。我尝试使用选项 pointLabels,但似乎我没有找到正确的方法。谁能给我一些提示?这是 demo的问题。

j查询代码:

$(document).ready(function() {
    $.jqplot.config.enablePlugins = true;
    var s1 = [[0.0, 0.0], [1.0, 0.036], [2.0, 0.064], [3.0, 0.084], [4.0, 0.096], [5.0, 0.1], [6.0, 0.096], [7.0, 0.084], [8.0, 0.063], [9.0, 0.036], [10.0, 0.0]];

    $.jqplot('chart1', [s1], {
        seriesDefaults: {
            showMarker: false,
            pointLabels: {
                show: false
            }
        },
        axes: {
            xaxis: {
                label: 'X label',
                pad: 0
            },
            yaxis: {
                label: 'Y label',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            }
        },
        legend: {
            show: true,
            location: 'ne',
            placement: 'inside',
            fontSize: '11px'
        },
        canvasOverlay: {
            show: true,
            objects: [
                {
                horizontalLine: {
                    y: 0.1,
                    color: 'rgb(100, 55, 124)',
                    show: true,
                }}
            ]
        },
        pointLabels: {
            show: true,
            labels: [[5, 0.10]],
            hideZeros: true
        }
    })
})​

最佳答案

没有直接的解决方案,但假设抛物线是均匀的。我只是做了一些假设来计算抛物线的顶点。它只是一个近似值。并准备了一个可以馈送到 Series 标签的数组。

var k = Math.round(s1.length / 2); //Assuming your Parabola to be uniform
    var l = [];
    var i=0;
    while(i<(k-1))
    {
    l.push("");
        i++;
    }
    l.push('MSY');

现在我们有了 l 数组,我将把它提供给系列选项以获得所需的结果。

 series: [
            {
            pointLabels: {
                show: true,
                labels: l
            }}],

我已经对 fiddle 进行了必要的更改并对其进行了更新 http://jsfiddle.net/JWhmQ/292/ . 我会建议您找到一个小插件或构建一个小脚本,它可以为您提供抛物线的尖端或顶点,并使用上面的内容。它会解决您的问题。

关于javascript - jqplot 在图上标记一个点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11367603/

相关文章:

javascript - Jasmine spy 不工作

asp.net - 服务器向 Web 客户端发送消息的最佳方式是什么?

java - 如何使用 Play 转换 Java 对象以供 jqplot 使用! 2.0?

javascript - JavaScript 数组周围的引号(可能非常容易修复)

javascript - PrimeFaces PolarArea 图表 - 网格线颜色变化

javascript - 在日期数组中,如何查找给定日期(javascript)中最接近的前一个日期?

javascript - php循环中的多个谷歌地图,带有javascript和引用id

javascript - 在 Javascript 中调用函数而不输入其参数

java - JSF & jqPlot 未捕获类型错误

javascript - jqPlot调整大小