Highcharts入门之基本属性,动态更新highcharts数据的实现方法

也希望大家多多支持脚本之家,    4.数据提示框(Tooltip),    3.数据列(Series)

动态更新highcharts数据的实现方法

一.基本组成:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
       var chart ;
      $(function (){
        chart = new Highcharts.Chart({
         chart: { 
            renderTo: 'container'
          },
          title: {
            text: '?',
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: '数据'
            },
          },
          series: []
        });
      });
      function show(){
       var trs = $('table tr');
       var datas=[];
       var map={};
       for(var i=1;i<trs.length;i++){
         var nams = $('td:first',trs[i]).html();
         var value = $('td:last',trs[i]).html();
         if(typeof map[nams]=='undefined'){
           var pos = datas.length;
           map[nams] = pos;
           datas[pos]={name:nams,data:[]};
         }
         datas[map[nams]]["data"].push(Number(value));
       }
       var series=chart.series; 
       if(series.length > 0){
         series[0].remove(false); 
       }
       var d = datas[0];
       chart.addSeries(d);//设置数据,danielinbiti
       chart.setTitle({text:d.name});//设置标题 commend by danielinbiti
       chart.redraw();
      }
    </script>
    <script type="text/javascript">
      $(function () {
        new Highcharts.Chart({
          chart: { 
            renderTo: 'container2'
          },
          title: {
            text: '链球菌毒素O',
          },
          xAxis: {
            categories: []
          },
          yAxis: {

            title: {
              text: '数据'
            },
          },
          series: [{
            name: 'SBASO',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }]
        });
      });
    </script>
  </head>
  <body>
    <input type='button' onclick='show()' value='显示表格数据'/>
    <h1>曲线图</h1>
    <!-- 第一个空图 -->
    <div id="container" style="width:300px;height:300px;float:left;"></div>
    <!-- 第二个有数据的图 -->
    <div id="container2" style="width:300px;height:300px;float:left;"></div>
    <table border="1" align="left">
      <tr>
        <td>CName</td>
        <td>EName</td>
        <td>Time</td>
        <td>Date</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>1</td>
        <td>7.0</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>2</td>
        <td>6.9</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>3</td>
        <td>9.5</td>        
      </tr>
    </table>
  </body>
</html>

    1.Highcharts包含标题(Title):主标题是必须的但是subTTitle不是必须

以上这篇动态更新highcharts数据的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    2.坐标轴(Axis):有x坐标(xAxis)和y坐标(yAxis)

您可能感兴趣的文章:

  • Highcharts+NodeJS搭建数据可视化平台示例
  • Highcharts学习之数据列
  • Highcharts
    多个Y轴动态刷新数据的实现代码
  • Highcharts使用简例及异步动态读取数据
  • 通过php动态传数据到highcharts

    3.数据列(Series):每个曲线,每个柱形条组,每个饼图的部分

    4.数据提示框(Tooltip):鼠标放上去的提示框

    5.图例(Legend):通过点击标示可以显示或隐藏该数据列

    6.<!–more–>

  
 7.版权信息(Credits):一般是highcharts的官网,指定credits.enabled=false不让显示

    8.导出功能按钮(Exporting):需要包含exporting.js

    9.标示线(PlotLines):主动添加如平均线等

二.参数属性:

1、调用highcharts:

方法一:

$(function () {
    $(".chart").highcharts({});
});

方法二:

var charts = new Highcharts.Chart({
  // Highcharts 配置
  chart : {
    renderTo : "container" // 注意这里一定是 ID 选择器
  }
}); 

2、设置表格宽高:

等同于设置div的宽高:

style="width: 800px ;height: 400px"

3、图表样式:

常见的有:borderbackgroundColormarginspacingstyle

总结

以上就是Highcharts入门之基本属性的全部内容,希望对大家学习Highcharts有所帮助,小编还会陆续更新Highcharts的相关文章,请继续关注脚本之家。

您可能感兴趣的文章:

  • Highcharts
    多个Y轴动态刷新数据的实现代码
  • 动态更新highcharts数据的实现方法
  • Highcharts使用简例及异步动态读取数据
  • Highcharts学习之坐标轴
  • Highcharts入门之简介
  • PHP+mysql+Highcharts生成饼状图
  • 浅析jquery的js图表组件highcharts
  • Highcharts学习之数据列