簡體   English   中英

以日期格式Highchart設置工具提示

[英]Set tooltip in date format Highchart

嗨,我正在使用圖表,在其中我將以特定格式設置工具提示值,

我有以下格式的類別和系列:

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

在這里,我使用類別值在工具提示中設置"2015-11-09"格式。

我想為此設置amt:

Wednesday, Nov 11, 2015

任何人都可以幫助我第一次登上高榜。

更新的代碼

謝謝

這就是我們在工具提示中設置日期格式的方式

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM