javascript - 以日期格式设置工具提示 Highchart

Question

您好，我正在使用一个 Highcharts ，我希望以特定格式设置工具提示值，

我有以下格式的类别和系列:

json message{"Categoires":["2015-11-09","2015-11-08""2015-11-15"],"Series":[2,0,2]}

这里我使用类别值在我进入的工具提示中设置 “2015-11-09”格式。

我想在 amt 中设置:

Wednesday, Nov 11, 2015

任何人都可以帮助我第一次使用 Highcharts 。

更新了代码

谢谢

Answer 1

这就是我们在工具提示中设置日期格式的方式

tooltip: {
        xDateFormat: '%Y-%m-%d %H:%M',
        shared: true
    }

这些是我们可以使用的各种日期格式

millisecond:"%A, %b %e, %H:%M:%S.%L",
second:"%A, %b %e, %H:%M:%S",
minute:"%A, %b %e, %H:%M",
hour:"%A, %b %e, %H:%M",
day:"%A, %b %e, %Y",
week:"Week from %A, %b %e, %Y",
month:"%B %Y",
year:"%Y"

这里有一个示例可供引用:

$(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy',
        spacingRight: 20
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        },
        startOnTick: true,
        showFirstLabel: true,
        endOnTick: true,
        showLastLabel: true,
        categories: dateAndTimeArray,
        tickInterval: 10,
        labels: {
            rotation: 0.1,
            align: 'left',
            step: 10,
            enabled: true
        },
        style: {
            fontSize: '8px'
        }
    },
    yAxis: {
        title: {
            text: 'Measurement value'
        }
    },
    tooltip: {
        xDateFormat: '%Y-%m-%d %H:%M',
        shared: true
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            lineWidth: 1,
            marker: {
                enabled: false
            },
            shadow: false,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            //  threshold: null
        }
    },
    series: [{
        type: 'line',
        name: 'Value',
        data: chartData,
        marker: {
            enabled: false
        }
    }]
});
});