highcharts笔记

最新推荐文章于 2022-10-12 11:30:42 发布

原创最新推荐文章于 2022-10-12 11:30:42 发布 · 585 阅读

CC 4.0 BY-SA版权

1.highcharts需要的文档引用

2.highcharts的使用

全局图表样式的统一，可参见

http://www.highcharts.com/docs/getting-started/how-to-set-options

http://www.highcharts.com/docs/chart-design-and-style/themes

https://github.com/highslide-software/highcharts.com/tree/master/js/themes.

<body>
<input type="button" id="addbt" value="addbar"/>
<div class="container">
<div class="row">
<div id="widget_01" class="col-md-6"></div>
<div id="widget_02" class="col-md-6"></div>
</div>
</div>
</div>
</body>
<script src="jss/bootstrap.min.js"></script>
<script src="jss/highcharts.js"></script>
<script src="jss/modules/exporting.js"></script>
<script src="jss/themes/grid-light.js"></script>
<script>
Highcharts.setOptions({
        chart: {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                    ]
            },
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        }
    });

var barOptions={
   chart:{
    renderTo:'widget_01',
    type:'bar'
    },
    title:{text:"Fruit Consumption"},
    xAxis:{categories:['Apples','Bananas','Oranges']},
    yAxis:{title:{text:'Fruit eaten'}},
    series:[{
     name:'Jane',
     data:[1,0,4]
     },{
     name:'John',
     data:[5,7,3]
        }]
   };

var columnOptions={
        chart: {
            renderTo: 'widget_02',
            type: 'column'
        },

        xAxis: {
            type: 'datetime'
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 3600 * 1000 // one hour
        }]
};

$(document).ready(function(e) {

    var chart1=new Highcharts.Chart(barOptions);
var chart2=new Highcharts.Chart(columnOptions);
$("#addbt").bind("click",function(){
  barOptions.series.push({name:"Jo",data:[3,4,2]});
  chart1.addSeries({name:"Jo",data:[3,4,2]});//在线更新chart1
  });
});
</script>
</html>

jquery 动态加载的li click事件不被执行的解决办法

$(".gridster").delegate("li","click",function(){

alert($(this).html());

})
$(document).on("click","li",function(){});