Question

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

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

我做错了什么？

我写的代码也在jsfiddle上。

$(function () {
$('#campaign-container').highcharts({
    chart: {
        type: 'areaspline',
    },
    title: {
        text: null
    },
    credits: {
        enabled: false,
    },
    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day:"%b %e, %Y",
        },
        tickInterval: 2,
        allowDecimals: false,
        labels: {
            formatter: function () {
                return this.value; // clean, unformatted number for year
            }
        }
    },
    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: {
        areaspline: {
                lineWidth: null,
            marker: {
                enabled: false,
                radius: 5
            }
        }
    },
    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]
    }]
    });
});

Answer 1

您需要提供：

1）系列级别的pointStart和pointInterval属性（在plotOptions或系列对象中）

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

日期时间值可以通过纪元时间戳（以毫秒为单位）或Date.UTC（）对象。

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

使用pointStart和pointInterval属性的示例：

http://jsfiddle.net/jlbriggs/7yrnreLx/3/

Answer 2

我已使用正确的日期时间值更新了代码，并添加了自定义的十字准线。

以下是具有正确数据值的最终代码

$(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]
    }]
});
});

高脚椅工具提示未显示准确的日期时间

2 个答案: