Highcharts 中文社区

查看: 859|回复: 0

[提问帖] 显示数据标题的问题

[复制链接]

该用户从未签到

1

主题

1

帖子

20

积分

HC 新手

Rank: 1

积分
20
发表于 2020-2-11 23:13:00 | 显示全部楼层 |阅读模式
本帖最后由 shaoyu 于 2020-2-11 23:14 编辑

111.png
怎么在上面 显示时间呢 再加上幅度,想要显示结果是【 09:35 现价:634.03 +5.23%】,我上传源码,新手不懂,望解答
下面是代码:

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="icon" >
        <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://code.highcharts.com.cn/highstock/highstock.js"></script>
</head>
<body>
<!--
*************************************************************************
   Generated by JShare at 2020-02-11 21:59:42
   From: https://jshare.com.cn/bigshark/ZZdlsg/1
*************************************************************************
-->
        <div id="container" style="min-width:400px;height:800px"></div>

        <script>
          $(function () {

        var data = [
            [1349049600000,659.39,+5.23%],
            [1349136000000,661.31,+6.23%],
            [1349222400000,671.45,+7.23%]

        ];
        var vol = [

        ];
        $('#container').highcharts('StockChart', {
            rangeSelector: {
                enabled: false
            },
            credits:{
                enabled:false // 禁用版权信息
            },
            title: {
                text: '这个是分时图'
            },
                        scrollbar : {
                        enabled : false
                },
           navigator: {enabled: false,
    xAxis: {
        tickWidth: 0,
        lineWidth: 0,
        gridLineWidth: 1,
        tickPixelInterval: 200,
        labels: {
            align: 'left',
            style: {
                color: '#888'
            },
            x: 3,
            y: -4
        }
    }
},
            yAxis: [{
                //十字准星
                crosshair:{
                    color: "rgba(255,255, 255, 0.8)",
                    zIndex: 7,
                    dashStyle: 'longdash',
                    label: {
                        backgroundColor:'#000',
                        enabled: true,
                        format: '{value:.5f}',
                        y: 6,
                        x: 100,
                        style : {
                            margin : '0 100px 0 0'
                        },
                        useHTML: true
                    }
                },
                                min: 545.4,
                                max: 666.6,
                plotLines:[{
                    color:'#00ff00',
                    dashStyle:'longdash',     //默认是值,这里定义为长虚线
                    value:606,              //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
                    width:2,               //标示线的宽度,2px
                    label:{
                        text:null,     //标签的内容
                        align:'left',                //标签的水平位置,水平居左,默认是水平居中center
                        x:10,                         //标签相对于被定位的位置水平偏移的像素,重新定位,水平居左10px
                        style:{
                            fontSize:'14px',
                            fontWeight:'bold'
                        }
                    }}],
                labels: {
                    formatter:function () {
                        if(this.value>606){
                            return '<span style="color: red">'+this.value+'</span>'
                        }else if(this.value<606){
                            return '<span style="color: chartreuse">'+this.value+'</span>'
                        }else{
                            return '<span style="color: blue">'+this.value+'</span>'
                        }
                    },
                    align: 'right',
                    x:-6
                },
                height: '70%',
                opposite: false
            },{
                linkedTo: 0,
                labels: {
                    formatter:function () {
                        var percentage = ((this.value -606)/606*100).toFixed(2);
                        if(this.value>606){
                            return '<span style="color: red">'+percentage+'%</span>'
                        }else if(this.value<606){
                            return '<span style="color: chartreuse">'+percentage+'%</span>'
                        }else{
                            return '<span style="color: blue">'+0+'%</span>'
                        }
                    },
                    // align: 'left',
                    x:6,
                },
                opposite: true,
                height: '70%'
            }, {
                minorTickInterval: 'auto',
                labels: {
                    style:
                        {"color":"#FCFFa5","fontWeight":"bold"},
                    align: 'right',
                    x: -3
                },
                title: {
                    text: ''
                },
                top: '70%',
                height: '30%',
                offset: 0,
                lineWidth: 0,
                opposite: false
            }],
            navigation:{
                buttonOptions:{
                    enabled:false
                }
            },
            series: [{
                name: '现价',
                data: data,
                type: 'line',
                tooltip: {
                    valueDecimals: 2
                },
                yAxis: 0
            },{
                name: '分时量',
                data: vol,
                type: 'column',
                color:'#fff',
                tooltip: {
                    //这个是保留小数点
                    valueDecimals: 2
                },
                yAxis:2
            }]
        });
    });</script>
</body>
</html>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表