zoukankan      html  css  js  c++  java
  • Highcharts绘制曲线图小结

    Higcharts绘制曲线图很好用!

    虽然说Highcharts官网有API

    刚接触这个领域,学有心得,理解不到位之处希望大家多多指教!

    项目绘制的曲线是:平均水位随时间的变化而改变的水情走势图。

    主要js代码:

     1 function DrawShow() {
     2     $.getJSON(
     3         '/Draw/StRvavR',
     4         {BeginTime: beginTime.value, EndTime: endTime.value },
     5         function (data) {
     6             var jsonData = data.list;          
     7             //声明一个一维数组
     8             var arr = new Array(jsonData.length);  
     9             //给数组赋值 ,赋值后成了二维数组           
    10             for (var i = 0; i < jsonData.length; i++) {
    11                 var m = jsonData[i].IDTM;
    12                 var n = m.replace("/Date(", "").replace(")/", "");
    13                 
    14 arr[i] = [parseInt(n), jsonData[i].AVZ]; 15 } 16 // var weight = $("#SelectPadding option:selected").val(); 17 var chart = Highcharts.stockChart('container', { 18 rangeSelector: { selected: 1 }, 19 title: { text: '河道水情走势图' }, 20 series: [{ 21 name: '平均水位', 22 data: arr, 23 type: 'spline', 24 tooltip: { 25 valueDecimals: 1 26 27 } 28 }] 29 }); 30 }); 31 }

     这里告诉大家一个陷阱请注意时间戳的使用时间戳是一个number类型,请不要用“”包括丢到数组里面,比如arr=[[“1496275200000”,1.45],...] 这样是不行的。时间戳的排序应该是从小到大,即升序,不然有错误的。

    用到的插件:请到Higcharts官网下载:https://www.hcharts.cn/download

      我的script引用:

    1         @*<script src="~/Scripts/Highcharts-6.2.0/code/highcharts.js"></script>
    2 Highcharts + Highstock 时只需要引入 highstock.js*@
    3         <script src="~/Scripts/Highstock-6.2.0/code/highstock.js"></script>
    4         <script src="~/Scripts/Highcharts-6.2.0/code/modules/exporting.js"></script>
    5         <script src="~/Scripts/Highcharts-6.2.0/code/highcharts-3d.js"></script>
    6         <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>  

    Higcharts官网:https://www.hcharts.cn/

    效果图:

  • 相关阅读:
    mysql 8 查询报错(sql_mode=only_full_group_by)
    docker安装mysql8版本后 客户端连接出现client does not support authentication...
    docker常用命令
    查看tomcat日志相关Linux命令
    java项目部署到linux服务器涉及的命令
    ehcache与redis对比
    JS中调用BigDecimal处理金额
    thymeleaf模板 th:href 踩坑
    汇总一些绝对有价值的解决方案,边学习边收集
    spring注解总结,spring注解大全
  • 原文地址:https://www.cnblogs.com/LiuL123-321/p/9937625.html
Copyright © 2011-2022 走看看