HighStock 时间折线图，应用C#

最新推荐文章于 2022-12-16 23:43:52 发布

xcLeigh

最新推荐文章于 2022-12-16 23:43:52 发布

阅读量696

点赞数 1

分类专栏： HTML5实战案例 C#使用

BY [email protected]

本文链接：https://blog.csdn.net/weixin_43151418/article/details/105390435

版权

HTML5实战案例同时被 2 个专栏收录

105 篇文章 96 订阅

订阅专栏

C#使用

40 篇文章 8 订阅

订阅专栏

帮助文档

使用教程 https://www.highcharts.com.cn/docs/basic-title
官方文档 https://api.highcharts.com.cn/highstock
官方案列 https://www.highcharts.com.cn/demo/highstock

时间折线图代码


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
    <meta name="viewport" content="width=device-width" />
    <title>曲线</title>
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <style type="text/css">
    </style>
</head>
<body>
        <div id="div1">
            <div id="container" style="background-color: red;width:100%; margin:0px;padding:0px;"></div>
        </div>
    </div>
    <script type="text/javascript" src="highstock.js"></script>
    <script type="text/javascript" src="exporting.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            loadData();
        }
        window.onresize = function () {
            loadData();
        }
        function loadData() {
            var qxH = window.innerHeight - 60;//- 80;
            //var qxW = window.innerWidth - 30;
            getChart(qxH);
        }
        function getChart(st) {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
            // Create the chart
            window.chart = new Highcharts.StockChart({
                chart: {
                    renderTo: 'container',
                    height: st,//图表高度
                    events: {
                        load: function () {
                        }
                    },
                    spacingBottom: 50
                },
                rangeSelector: {
                    buttons: [{
                        count: 1,
                        type: 'day',
                        text: '1天'
                    }, {
                        count: 3,
                        type: 'day',
                        text: '3天'
                    }, {
                        type: 'all',
                        text: '全部'
                    }],
                    inputEnabled: false,
                    selected: 0
                },
                title: {
                    text: '曲线图'
                },
                exporting: {
                    enabled: false//是否有导出
                },
                yAxis: {
                    //max: 350, // 定义Y轴 最大值
                    //min: 0, // 定义最小值
                    title: {
                        text: '指标（单位）'
                    },
                    labels: {
                        align: 'left',
                        //x: 3, y: 16, //位置
                        formatter: function () {
                            return Highcharts.numberFormat(this.value, 0);
                        }
                    },
                    showFirstLabel: true,

                },
                tooltip: {
                    xDateFormat: '%Y年%m月%d日 %H点%M分%S秒',
                    shared: true,
                    crosshairs: true,
                    valueSuffix: '单位'
                },
                legend: {
                    enabled: true,
                    align: 'center',
                    verticalAlign: 'bottom',
                    y: 40,
                    floating: true,
                    borderWidth: 1
                },
                series: [{
                    name: 'A相指标', color: '#FC0', data: [[1586188813000,5833],[1586189112000,5993],[1586189413000,5943],[1586189714000,5864],[1586190014000,5913],[1586190315000,5840],[1586190615000,5871],[1586190915000,5893],[1586191216000,5920],[1586191516000,5944],[1586191816000,5994],[1586192116000,6014],[1586192417000,6016],[1586192717000,6029],[1586193017000,5995],[1586193318000,6026],[1586193618000,5990],[1586193918000,5895],[1586194219000,6050],[1586194519000,6064],[1586194819000,6004],[1586195120000,5976],[1586195420000,6028],[1586195720000,6001],[1586196001000,5970],[1586196301000,6072],[1586196601000,5989],[1586196901000,6025],[1586197202000,5968],[1586197502000,5957],[1586197802000,5963],[1586198103000,6073],[1586198403000,5963],[1586198703000,6035],[1586199004000,5967],[1586199303000,5890],[1586199603000,5920],[1586199905000,5990],[1586200205000,6009],[1586200505000,5997],[1586200806000,5998],[1586201106000,6005],[1586201406000,5957],[1586201706000,5998],[1586202007000,6026],[1586202307000,6019],[1586202607000,6074],[1586202908000,5999],[1586203208000,6011],[1586203508000,6050],[1586203809000,5982],[1586204109000,5919],[1586204409000,5988],[1586204710000,5956],[1586205010000,6014],[1586205310000,6049],[1586205611000,5869],[1586205911000,6051],[1586206211000,6001],[1586206511000,6044],[1586206812000,5999],[1586207112000,5924],[1586207412000,5984],[1586207713000,5962],[1586208012000,5899],[1586208312000,6026],[1586208614000,6011],[1586208914000,5997],[1586209214000,6041],[1586209515000,6028],[1586209815000,5934],[1586210115000,5997],[1586210416000,5989],[1586210716000,5997],[1586211016000,5904],[1586211316000,5943],[1586211617000,5986],[1586211917000,5978],[1586212216000,5989],[1586212518000,5996],[1586212818000,6039],[1586213118000,6004],[1586213419000,5914],[1586213719000,5925],[1586214019000,5893],[1586214320000,5967],[1586214620000,5994],[1586214920000,5859],[1586215201000,5955],[1586215501000,5898],[1586215801000,5879],[1586216101000,5933],[1586216402000,5963],[1586216702000,5960],[1586217002000,5975],[1586217303000,5973],[1586217603000,5873],[1586217903000,5926],[1586218203000,5946],[1586218504000,5982],[1586218804000,5966],[1586219105000,5961],[1586219405000,5899],[1586219705000,5964],[1586220006000,5892],[1586220306000,5992],[1586220606000,5951],[1586220907000,5950],[1586221207000,5949],[1586221507000,5948],[1586221807000,5963],[1586222108000,5957],[1586222408000,5914],[1586222708000,5944],[1586223009000,5917],[1586223309000,5879],[1586223609000,5971],[1586223910000,5843],[1586224210000,5863],[1586224510000,5940],[1586224811000,5894],[1586225111000,5841],[1586225411000,5927],[1586225712000,5927],[1586226012000,5899],[1586226312000,5940],[1586226612000,5918],[1586226912000,5911],[1586227213000,5912],[1586227513000,5921],[1586227814000,5963],[1586228114000,5961],[1586228414000,5871],[1586228715000,5869],[1586229015000,5959],[1586229315000,5907],[1586229616000,5896],[1586229916000,5952],[1586230216000,5903],[1586230517000,5901],[1586230817000,5937],[1586231116000,5925],[1586231417000,5848],[1586231718000,5882],[1586232018000,5898],[1586232318000,5877],[1586232619000,5847],[1586232919000,5859],[1586233219000,5873],[1586233520000,5871],[1586233820000,5884],[1586234120000,5817],[1586234401000,5749],[1586234701000,5866],[1586235001000,5847],[1586235302000,5858],[1586235602000,5847],[1586235902000,5879],[1586236203000,5909],[1586236503000,5910],[1586236802000,5911],[1586237102000,5933],[1586237404000,5889],[1586237704000,5962],[1586238004000,5941],[1586238305000,5951],[1586238605000,5892],[1586238905000,5895],[1586239206000,5865],[1586239506000,6005],[1586239806000,5964],[1586240107000,5973],[1586240407000,5908],[1586240707000,5929],[1586241007000,5948],[1586241308000,5895],[1586241608000,5826],[1586241908000,5899],[1586242209000,5910],[1586242509000,5948],[1586242809000,5928],[1586243110000,5963],[1586243410000,6018],[1586243710000,5937],[1586244011000,5957],[1586244311000,5911],[1586244611000,5991],[1586244912000,5939],[1586245212000,5930],[1586245512000,5984],[1586245812000,5956],[1586246113000,5913],[1586246413000,6009],[1586246714000,6023],[1586247014000,5940],[1586247314000,5953],[1586247614000,5976],[1586247915000,5892],[1586248215000,5949],[1586248515000,5914],[1586248816000,5939],[1586249116000,5963],[1586249416000,5955],[1586249716000,5915],[1586250016000,5951],[1586250317000,5924],[1586250618000,5990],[1586250918000,5940],[1586251218000,5892],[1586251519000,5944],[1586251819000,5936],[1586252119000,5955],[1586252419000,5970],[1586252720000,5887],[1586253020000,6019],[1586253320000,5822],[1586253601000,5974],[1586253901000,5862],[1586254201000,5890],[1586254502000,5964],[1586254802000,5914],[1586255102000,5883],[1586255403000,5889],[1586255702000,6003],[1586256002000,5990],[1586256304000,5971],[1586256604000,5950],[1586256904000,5931],[1586257205000,5853],[1586257505000,5887],[1586257805000,5909],[1586258105000,5862],[1586258406000,5905],[1586258706000,5804],[1586259006000,5956],[1586259307000,5846],[1586259607000,5942],[1586259906000,5906],[1586260208000,5958],[1586260508000,5874],[1586260808000,5939],[1586261109000,5912],[1586261409000,5984],[1586261709000,5960],[1586262010000,5897],[1586262310000,6011],[1586262610000,5922],[1586262910000,5985],[1586263211000,6001],[1586263511000,5930],[1586263811000,6049],[1586264112000,5949],[1586264412000,6042],[1586264711000,5981],[1586265013000,5943],[1586265313000,6054],[1586265613000,6012],[1586265914000,5982],[1586266214000,6002],[1586266514000,5986],[1586266815000,5941],[1586267115000,5993],[1586267415000,5965],[1586267715000,6038],[1586268016000,6043],[1586268316000,6019],[1586268615000,6046],[1586268916000,5971],[1586269217000,5998],[1586269517000,5960],[1586269818000,5910],[1586270118000,5935],[1586270418000,5815],[1586270719000,5940],[1586271019000,5830],[1586271319000,5942],[1586271620000,5934],[1586271920000,5974],[1586272220000,5974],[1586272521000,5938],[1586272801000,5927],[1586273101000,5954],[1586273401000,5982],[1586273702000,6080],[1586274002000,5915],[1586274302000,5940],[1586274602000,5867],[1586274903000,6040]]
                }
		//, {
                //    name: 'B相指标', color: 'green', data: [@ViewBag.b]
                //},
                //{
                //    name: 'C相指标', color: 'red', data: [@ViewBag.c]
                //}
                ]
            });
        }
    </script>
</body>
</html>

C#后台代码

//根据时间转换精确毫秒，用于前台转换
public static double GetTimestamp(DateTime d)
{
            TimeSpan ts = d.ToUniversalTime() - new DateTime(1970, 1, 1);
            return ts.TotalMilliseconds;     //精确到毫秒
}

数据格式：【【时间,值】，… ，【时间,值】】

如有问题，可直接源代码下载

xcLeigh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HighStock 时间折线图，应用C#

帮助文档[使用教程](https://www.highcharts.com.cn/docs/basic-title) https://www.highcharts.com.cn/docs/basic-title[官方文档](https://api.highcharts.com.cn/highcharts#chart)https://www.highcharts.com.cn/demo/high...
复制链接

扫一扫