javascript - 为什么这个 Highcharts 图表只显示第一个和最后一个节点的工具提示?

标签 javascript jquery highcharts

我刚开始使用 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/ ,他们管理得很好,但我看不出我做错了什么/有什么不同。

我知道这会非常简单,但我看不到。谁能指出我正确的方向?

谢谢, 格雷格。

最佳答案

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

关于javascript - 为什么这个 Highcharts 图表只显示第一个和最后一个节点的工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13360376/

相关文章:

javascript - 在 AngularJS 中,如何在我的开发环境中用非缩小文件替换缩小的 javascript 文件?

javascript - 单击时获取所有 div 宽度的总和

jquery:从字符串分配事件

jquery - 灯箱的 CSS

javascript - 在动态标记 Highcharts 上添加网格线

javascript - 如何使用按钮清除动态生成的输入字段?

javascript - 将 javascript 数组值分配给 angularjs 变量

javascript - 马来西亚手机号码的正则表达式模式

javascript - 在 Highcharts 中,是否可以为图例符号添加边框?

javascript - Highcharts - 组织原始数据