highcharts基本操作

最新推荐文章于 2024-10-10 07:54:27 发布

原创最新推荐文章于 2024-10-10 07:54:27 发布 · 485 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web图形

网页专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用Highcharts库动态更新图表标题及数据。通过JavaScript编程实现Highcharts图表的初始化配置，并演示了如何动态添加数据系列及修改图表标题。

<html>
<head>
    <title>Highcharts Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/highcharts.js"></script>
    <script language="javascript" type="text/javascript" src="js/exporting.js"></script>
    <script type="text/javascript">
      var chart;
      var cat=new Array();
      $(document).ready(function() {
        var options = {
          chart: {
           type:'line',
            renderTo: 'container',
            marginRight: 130,
            marginBottom: 25
          },
          title: {
            text: '我是标题',
            x: -20 //center
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: 'Y轴'
            }

          },
          tooltip: {
            formatter: function() {
              return '<b>'+ this.series.name +'</b><br/>' + this.x +': '+ this.y ;
            }
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
          },
          series: []
        }

//动态添加数据
      options.series = new Array();
        var i;

           options.series[0] = new Object();
           options.series[0].name = 'Sample'+i;
        for(i=0;i<10;i++)
        {
           options.series[0].data = new Array(0+i, 5+i, 0+i, 8+i,0+i,7+i,6+i,0+i,8+i,9+i);
           cat.push("leaf"+i);
       }
       options.xAxis.categories=cat;
         chart = new Highcharts.Chart(options);

         var title=chart.title.text;   //获取标题信息
       //alert(title);



       //设置新标题
         var   titles={
               useHTML:true,         //判断是否解析标签例如<a>标签
               text:"<a href='http://www.baidu.com'>我是新标题</a>",
               style:{color:"#ff0000"}
       };

       chart.setTitle(titles);

     });


   // 获取标题位置

</script>
</head>
<body>
   <div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>