高图表图形中的输入字段

Question

我有一个高图表图形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
},

​

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

如何做到这一点？

Answer 1

有趣的要求，我想除了第五个，我都有了。要做到这一点相当容易。您需要绘制线、输入表单和另一个

首先，您需要从输入表单中提取您的年份，并在其中添加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'
    });

接下来，要以5年为增量显示其他绘图线项目：

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”文本。为此，您需要一个<代码>

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 + '%, ';

然后我将这个strIntrestPay写入

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

现在，我们需要写出额外绘制线项目的百分比：

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

演示