1

Highcharts グラフィックhttp://jsfiddle.net/jerryvermanen/XRjyc/がありますが、入力フィールドを追加したいと思います。入力フィールドは年を要求します。入力後:

  • グラフィックは、入力年に 1 年を追加する必要があります (したがって、1992 年は 1993 年になります)。
  • グラフィックには、入力年 + 1 に垂直なプロット ラインが表示されます (つまり、1993 年のライン)。
  • また、その 5 年後 (1998 年)、5 年後 (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

興味深い要件です。5 番目の要件を除いて、すべての要件を満たしていると思います。これを行うのはかなり簡単です。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アイテムを無限に追加しないようにするためです。

追加の要件は、ページに「You pay 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 に答える