簡體   English   中英

如何在高圖表中顯示一系列數據中的不同工具提示格式

[英]How to display different tooltip formats in series of data in High Chart

在這里,我有一系列數據,而其中一些數據的持續時間如00:12:00而其他數據則為int值,

這是我的Javascript代碼(您也可以在JSFiddle上查看它):

$(function () {
$('#container').highcharts({
    chart: {
        type: 'line',
        inverted: false
    },
    title: {
        text: 'Duration Data'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

    },
    yAxis: {
        min: 0,
        type: "datetime",
        title: {
            text: 'Time Duration'
        },
        lineWidth: 2,
        labels: {
            formatter: function () {
                var ts = this.value,
                    hs = ts / (3600 * 1000),
                    ms = new Date(ts).getUTCMinutes();
                    sc = new Date(ts).getUTCSeconds();

                sc = sc < 10 ? '0' + sc : sc;
                ms = ms < 10 ? '0' + ms : ms;

                hs = hs < 10 ? '0' + hs : hs;

                if(hs > 1)
                    return hs + ":" + ms +":" + sc;
                else
                    return ms +":" + sc;
            }
        }
    },
    tooltip:{
        formatter:function() {
            return Highcharts.dateFormat('%H:%M:%S',this.y);
        }
    },
    legend: {
        enabled: false
    },

    plotOptions: {
        spline: {
            marker: {
                enable: false
            }
        }
    },
    series: [{
        name: 'Time',
        data: [600000, 2520000,75610000]
    },
    {
        name: 'Price',
        data: [12,778,123]
    }]
});
});

這是我的HTML代碼:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width:        600px; margin: 0 auto"></div>

如何區分高圖表中的多個系列數據?

嘗試這個:

tooltip:{
            formatter:function() {
               var a = Highcharts.dateFormat('%H:%M:%S',this.y);
                if(a === "00:00:00"){
                  return this.y;
                }else{
                  return a;
                }
            }
        }

這是更新的小提琴: http : //jsfiddle.net/ishandemon/efgu7eru/2/

更新了小提琴的系列名稱: http : //jsfiddle.net/ishandemon/efgu7eru/3/

暫無
暫無

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

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