1

我刚开始使用 Highcharts，在为图表中的每个数据项显示工具提示时遇到了一些麻烦。目前，它只显示第一个和最后一个项目的工具提示。

var chart1; // globally available

$(document).ready(function () {

    var options = {
        chart: {
            renderTo: 'AssessmentChart',
            marginRight: 100,
            marginBottom: 40
        },
        title: {
            text: 'Assessment history',
            x: -20 //center
        },
        subtitle: {
            text: 'Assessment history for this patient',
            x: -20 //center
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Score'
            },
            max: 72,
            min: 0
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.y +'</b>';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: []
    };

    // Get the main assessment data...
    var dlqiData = [], hdnDlqiData = $("#hdnDlqiData");

    if (hdnDlqiData.length > 0) {
        var dlqiDataJson = $.parseJSON(hdnDlqiData.val());

        $.each(dlqiDataJson, function (i, item) {
            dlqiData.push(
                {
                    x: stringToUtcDate(item.dateCreated),
                    y: item.calculatedScore
                }
            );
        });

        options.series.push({
            type: 'spline',
            name: 'DLQI',
            data: dlqiData
        });
    }

    chart1 = new Highcharts.Chart(options);

    function stringToUtcDate(datestring) {
        var date = datestring.split('/');

        return Date.UTC(parseInt(date[2], 10), parseInt(date[1], 10) - 1, parseInt(date[0], 10));
    }

});​

我正在从隐藏的表单字段中提取数据，所以这里有一个 Fiddle 展示了这一点：http: //jsfiddle.net/gfyans/LjRGk/3/

这是官方的 Fiddle 之一，http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/，他们管理好，但我看不出我做错了什么/不同。

我知道这会非常容易，但我看不到。谁能指出我正确的方向？

谢谢，格雷格。

4

1 回答 1

5

如果使用日期时间 x 轴，您需要将数据按日期升序排列。

于 2012-11-13T13:00:37.463 回答