zoukankan      html  css  js  c++  java
  • Highcharts折线图_结合ajax实现局部刷新

    1.首先,在https://www.hcharts.cn/下载Highcharts的组件。

    2.然后,引用   

     <script src="../code/highcharts.js"></script> 

    3.html:

    1  <div id="container" style=" 550px; height: 400px;">
    2  </div>

    4.js

     1  function getselect(Number_cp) {
     2         Number_cp = $(".Number_cp").val();
     3         $.ajax({
     4             url: "../Ajax/DataStatistics.ashx?action=select",
     5             type: "POST",
     6             dataType: "text",
     7             data: {
     8                 Number_cp: Number_cp
     9             },
    10             success: function (data) {
    11                 var s = data;               
    12                 var model = eval(s);
    13                 a = "";
    14                 for (var i = 0; i < model.length; i++) {
    15                     var m = model[i].Quantity;                    
    16                     a += m + ",";
    17                 }
    18                 series_data = "";
    19                 series_data = a.substring(0, a.length - 1);                
    20                 getQuantity(series_data);
    21             }
    22         })
    23     }
    24   function getQuantity(series_data) {
    25         var chart = Highcharts.chart('container', {
    26             chart: {
    27                 type: 'line'
    28             },
    29             credits: {
    30                 enabled: false //不显示LOGO 
    31             },
    32             title: {
    33                 text: '产品数量/每月'
    34             },
    35             legend: {
    36                 align: 'right',
    37                 verticalAlign: 'top',
    38                 y: 60
    39             },
    40             xAxis: {
    41                 softMin: 1,
    42                 title: {
    43                     text: '月份'
    44                 },
    45                 categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    46             },
    47             yAxis: {
    48                 softMax: 4000,
    49                 tickAmount: 9,
    50                 title: {
    51                     text: '产品数量'
    52                 },
    53             },
    54             plotOptions: {
    55                 line: {
    56                     dataLabels: {
    57                         enabled: true
    58                     },
    59                     enableMouseTracking: false
    60                 }
    61             },
    62             series: [{
    63                 name: '产品数量',
    64                 data: eval("[" + series_data + "]")
    65             }],
    66         });
    67     }

    5.效果图:

  • 相关阅读:
    如何理解联合文件系统?
    Docker 学习笔记(一)
    Bzoj 3124: [Sdoi2013]直径 题解
    Bzoj 3131 [Sdoi2013]淘金 题解
    欧拉路(题目)
    硬币问题
    线段树、树状数组
    Splay树、Treap树
    模拟退火
    广搜题目(一本通)
  • 原文地址:https://www.cnblogs.com/bonnie-w/p/6796591.html
Copyright © 2011-2022 走看看