Question

我有一张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，7％），1994年（4,77％），1996年（4,52％）， 1997年（4,94％），1998年（3,74％）和1999年（4,77％），（）之间的百分比应在3-1-2001之间加上。

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

有趣的要求，我想除了第五个以外我都有。要做到这一点相当容易。您需要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'
    });

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

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>元素（或其他任何东西）来写入。为了获得这些值，我从here中得到了很好的功能：

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

DEMO

高图图形中的输入字段

1 个答案: