Highchat如何使用

一:配置

1.引入JQuery.js和Highchart.js文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="/js/highcharts.js" type="text/javascript"></script>

2.在script标签或者单独的js文件中初始化表结构,一般的表用new Highchart.Chart(),股市表用new Highchart.StockChart().

注意其中的renderTo,其键值为对应呈现图表结构的id。

3,加入对应第2步中的id的div标签,并可设置相应的表结构的宽度与高度。

4.可选项,运用highchart自带的4个主题去设置选项。

二:设置选项

直接用Javascript对象结构进行设置或者用第一步中的4进行设置

三:理解轴

highchart都会拥有一个具备类别的轴,该类别可以自己定义,如果使用线性或者时间日期轴时,highchart有自带的调节功能,并且可以通过xAxis.labels.formatter进行格式化轴标签,如果使用其他的类别轴时,当类别间过度稠密时,可以通过旋转轴标签或xAxis.labels.staggerLines进行调整

四:预处理选项

通过编程来改变选项,用javascript object的形式比较好,如:

// Good code:
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }]
};

当定义了object对象后,还可以对其进行扩展,比如option.series.push({ name:'aaaaa' , data: [1,2,3]}),option.renderTo,option['renderTo']等等

注:还可以通过外部csv文件或者xml文件进行设置

五:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值