Datetime Highchairs工具提示未显示准确的日期和时间

我用highchairs.com写了一份统计表，用于日常访问和安装。我想在鼠标悬停或单击事件时显示带有日期时间和名称的工具提示，以及每个系列的总值

Highcharts工具提示共享数据共享输出在鼠标悬停在标记上时显示名称，但日期和时间不正确

我做错了什么

我写的代码也在上面

---

您需要提供：

1） 系列级别上的

pointStart

和

pointInterval

属性（在绘图选项中或系列对象中）

2） 数据的x值中的日期时间值

datetime值可以通过历元时间戳（以毫秒为单位）或Date.UTC（）对象来表示

pointInverval（如果使用）必须以毫秒为单位

使用

pointStart

和

pointInterval

属性的示例：

---

您需要提供：

1） 系列级别上的

pointStart

和

pointInterval

属性（在绘图选项中或系列对象中）

2） 数据的x值中的日期时间值

datetime值可以通过历元时间戳（以毫秒为单位）或Date.UTC（）对象来表示

pointInverval（如果使用）必须以毫秒为单位

使用

pointStart

和

pointInterval

属性的示例：

---

我已经用正确的日期时间值更新了代码，并添加了定制的十字线

这是带有正确数据值的最终代码

$(function () {
  $('#container').highcharts({
    chart: {
        type: 'areaspline'
    },
    title: {
        text: null
    },
    credits: {
        enabled: false,
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    xAxis: {
                type: 'datetime',
      tickInterval: 2,
                dateTimeLabelFormats: {
            day:"%e",
      },
      crosshair: {
        color:'#e77378',
        zIndex: 2,
        width: 3,
      }
    },
    yAxis: {
        min: 0,
        max: 3000,
        tickInterval: 1000,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        shared: true
   },
    legend: {
        align: 'left',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        x: 0,
        y: 0
    },
    plotOptions: {
        series: {
        cursor: 'pointer',
        pointStart: Date.UTC(2016,0,1),
        pointInterval: 86400000, //1 day
        },
      },
        areaspline: {
                lineWidth: null,
            marker: {
                enabled: false,
                lineColor:'#e77378',
                fillColor:'#ffffff',
                lineWidth: 3,
                radius: 4,
                symbol:'circle'
            }
        }
    },
    series: [{
        name: 'Visits',
        color: '#d3d3d3',
        data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }, {
        name: 'Installs',
        color: '#e77378',
        data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }]
});
});

---

我已经用正确的日期时间值更新了代码，并添加了定制的十字线

这是带有正确数据值的最终代码

$(function () {
  $('#container').highcharts({
    chart: {
        type: 'areaspline'
    },
    title: {
        text: null
    },
    credits: {
        enabled: false,
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    xAxis: {
                type: 'datetime',
      tickInterval: 2,
                dateTimeLabelFormats: {
            day:"%e",
      },
      crosshair: {
        color:'#e77378',
        zIndex: 2,
        width: 3,
      }
    },
    yAxis: {
        min: 0,
        max: 3000,
        tickInterval: 1000,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        shared: true
   },
    legend: {
        align: 'left',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        x: 0,
        y: 0
    },
    plotOptions: {
        series: {
        cursor: 'pointer',
        pointStart: Date.UTC(2016,0,1),
        pointInterval: 86400000, //1 day
        },
      },
        areaspline: {
                lineWidth: null,
            marker: {
                enabled: false,
                lineColor:'#e77378',
                fillColor:'#ffffff',
                lineWidth: 3,
                radius: 4,
                symbol:'circle'
            }
        }
    },
    series: [{
        name: 'Visits',
        color: '#d3d3d3',
        data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }, {
        name: 'Installs',
        color: '#e77378',
        data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
    }]
});
});

---

您尚未提供任何日期时间数据供其使用。因此它从0开始，也就是1970年1月1日（大纪元的开始）。小提琴根据您提供的数据正确地显示了日期。@jlbiggs我不知道如何使用当前月份来绘制海图。如果您能为我编辑JSFIDLE或编写代码，那就好了。@Maqk，您的数据中没有提供任何日期，只有一组Y值。你知道你的数据点的日期吗？如果是，请在

数据中包括：[]

。然后，您可以设置日期的格式，以便按照您的意愿显示。@wergeld我认为它应该采用当前时区。YValue上的数据点是两个系列的每日访问和安装，如您所见，但它是基于当前月份获取的。我尝试输入[Date.UTC（2016，0，1），0]，但没有成功。因此，如果我站在国际日期线的一边，我会有一个“今天”的值，但如果我站在另一边，它会是另一个值吗？这就是你所说的“它应该占据当前时区”的意思？这对用户不是很有用。您没有提供任何日期时间数据供其使用。因此它从0开始，也就是1970年1月1日（大纪元的开始）。小提琴根据您提供的数据正确地显示了日期。@jlbiggs我不知道如何使用当前月份来绘制海图。如果您能为我编辑JSFIDLE或编写代码，那就好了。@Maqk，您的数据中没有提供任何日期，只有一组Y值。你知道你的数据点的日期吗？如果是，请在

数据中包括：[]

。然后，您可以设置日期的格式，以便按照您的意愿显示。@wergeld我认为它应该采用当前时区。YValue上的数据点是两个系列的每日访问和安装，如您所见，但它是基于当前月份获取的。我尝试输入[Date.UTC（2016，0，1），0]，但没有成功。因此，如果我站在国际日期线的一边，我会有一个“今天”的值，但如果我站在另一边，它会是另一个值吗？这就是你所说的“它应该占据当前时区”的意思？这对用户来说不是很有用。