1

我有一个 Highcharts 图形http://jsfiddle.net/jerryvermanen/XRjyc/，但我想添加一个输入字段。输入字段要求一年。输入后：

  • 图形应在输入年份的基础上增加一年（因此 1992 变为 1993）。
  • 该图形应在输入年份 + 1 上显示一条垂直绘图线（因此为 1993 年的一条线）。
  • 它还应该在五年后（1998 年）和五年后（2003 年）添加一行，依此类推。
  • 它还应该取这些年份（1993、1998、2003、2008、2013）的百分比并将它们添加到文本中。比如，“你支付 X%、Y%、Z% 等等。”

  • 让事情变得更复杂一点，对于输入年份 1992 (4,94%)、1993 (3,74%)、1994 (4,77%)、1996 (4,52%)、1997 (4,94% )、1998 (3,74%) 和 1999 (4,77%)，应在 2001 年 3 月 1 日添加 () 之间的百分比。

    chart = new Highcharts.Chart({
    exporting: {
    enabled: false
    },
    chart: {
        renderTo: 'container',
        type: 'spline',
        marginRight: 20
    },
    title: {
        text: 'Rente DUO'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%Y',
            year: '%Y'
        }
    },
    yAxis: {
min:0,
        title: {
            text: 'Werkloosheid (%)'
        },

                     plotLines: [{
            value: 0,
            width: 2,
            color: '#000000',
            zIndex: 5
        },            {
            label: {
    text: 'Rente DUO',
    align: 'right'
    },
    value: 5,
            width: 0.5,
            color: '#ffffff',
            zIndex: 1
        }]
    },
    tooltip: {
        formatter: function() {
                return '<b>'+ this.series.name +'<br/>'+
                Highcharts.dateFormat('%b %Y', this.x) +':</b> '+ this.y +'%';
        }
    },

     plotOptions: {
    spline: {
        lineWidth: 3,
        states: {
            hover: {
                lineWidth: 4
            }
        },
        marker: {
            enabled: false,
            states: {
                hover: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 4,
                    lineWidth: 1
                }
            }
        }
    }
},
           legend: {
enabled: false
},

​</p>

如果这很复杂，也可以通过在进入一年后绘制一个新的图表来完成。该图将是具有相同数据的阶梯线图。

这怎么能做？

4

1 回答 1

2

有趣的要求，我想除了第五个之外我都有。做到这一点相当容易。您需要plotLines, 输入表单和另一个<div>元素。

首先，您需要从输入表单中提取您的年份并在其中添加 1 年（不知道为什么 +1，但在这里）：

passedYear = parseInt($('input:text').val(), 10) + 1;

然后您需要将这个人类可读的年份转换为 javascript 时间戳：

showYear = Date.UTC(passedYear, 0, 1);

从这里您还需要考虑用户输入的值是否高于数据的最大年份（也低于最小值）。以下是如何测试大于场景的方法：

var extremes = chart.xAxis[0].getExtremes();
var maxYear;
maxYear = extremes.dataMax;
if (maxYear > showYear) {
     do stuff
}

然后你创建你的初始plotLine：

    chart.xAxis[0].addPlotLine({
        value: showYear,
        color: 'red',
        width: 2,
        id: 'plotLine'
    });

接下来，您希望以plotLine5 年为增量显示其他项目：

var plInterval;
plInterval = 5;
    while (nextPL < maxYear) {
        chart.xAxis[0].addPlotLine({
            value: nextPL,
            color: 'red',
            width: 2,
            id: 'plotLine'
        });
        nextYear = nextYear + plInterval;
        nextPL = Date.UTC(nextYear, 0, 1);
    }

这是为了确保我们不会将不必要plotLine的项目添加到永远不会显示的无穷大。

附加要求是在页面上显示“您支付 xxxx”文本。为此，您需要一个<div>要写入的元素（或其他任何内容，取决于您）。为了获得这些值，我从这里提取了一个很棒的函数：

function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
        if (points[i].x >= xValue) break;
        yValue = points[i].y;
    }
    return yValue;
}

我像这样使用它：

var yVal1;
yVal1 = getYValue(chart, 0, maxYear);
strInterestPay = strInterestPay + yVal1 + '%, ';

然后我把它strInterestPay写到<div>：

$("div:interest").html(strInterestPay);

现在，我们需要写出附加plotLine项目的百分比：

yVal1 = getYValue(chart, 0, nextPL);
strInterestPay = ', ' + yVal1 + '%';
$('.content').append(strInterestPay);

演示

于 2012-12-21T16:32:28.327 回答