码迷,mamicode.com
首页 > 其他好文 > 详细

新手必看】Highcharts的100个基础问答

时间:2015-06-12 13:18:31      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

新手必看】Highcharts的100个基础问答

2014-12-2 10:59| 发布者: Mr.Zhang| 查看: 2749| 评论: 3|来自: Highcharts中文论坛

 
摘要: 1、图表中的 highcharts.com 怎么去掉? 答:通过设置 credits.eneable = false 即可,即credits: { enabled:false}
 
 

为了方便说明,先贴出Highcharts主要组成部分的说明图

 

图1:highcharts主要组成部分

图中名字解释:

 

  • Title & SubTitle   图表标题及副标题
  • exporting           图表导出功能按钮
  • tooltip               数据提示框
  • xAxis、yAxis     x、y轴
  • Series               数据序列
  • legend 图例
  • credits 版权标签

 

 
1、图表中的 highcharts.com 怎么去掉?
    
答:通过设置 credits.enabled= false 即可,即
      credits: {
         enabled:false
      }
     另外,该文字及连接都是可以自定义的, 详见 API credits
 
2、如何增加导出功能(或显示导出按钮)?
 
答:通过引入 exporting.js 即可给图表增加导出功能,即添加如下代码
 
同理,如果不想要导出功能,不引入exporting.js 即可,另外,禁用导出功能还可以通过设置 exporting.enabled = false,详见API  exporting.enabled
 
3、如何去掉图例(legend)?
 
答:设置 legend.enable = false 即可,即
      legend: {
         enabled:false
      }
     饼图需要设置 plotOptions.pie.showInLegend = true 才可显示图例。
 
4、如何设置图表颜色
     1)最基本的图表线条(或柱形等),是通过 colors 来设置的,即
    colors: [‘#7cb5ec‘, ‘#434348‘, ‘#90ed7d‘, ‘#f7a35c‘, ‘#8085e9‘,‘#f15c80‘, ‘#e4d354‘, ‘#8085e8‘, ‘#8d4653‘, ‘#91e8e1‘]
     其中颜色值及个数完全可以自定义
    2)定义某个点的颜色
    通过设置 series.data.color 实现对某个点进行自定义颜色,实例效果如下
   
    3)对于柱状图单个序列不同柱形颜色自定义,除了设置 colors外,还需要额外设置  plotOptions.column.colorByPoint = true ,其他类型图表类似的也有
   
 
 
5、如何将图表中的英文汉化(显示成中文)?
   
 
    即设置 lang 属性,改属于用于图表中文字的显示,也就是说,图表中所有文字的修改都可以通过该属性下来设置。

 

     实例代码:

     Highcharts.setOptions({

    lang:{

       contextButtonTitle:"图表导出菜单",

       decimalPoint:".",

       downloadJPEG:"下载JPEG图片",

       downloadPDF:"下载PDF文件",

       downloadPNG:"下载PNG文件",

       downloadSVG:"下载SVG文件",

       drillUpText:"返回 {series.name}",

       loading:"加载中",

       months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

       noData:"没有数据",

       numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],

       printChart:"打印图表",

       resetZoom:"恢复缩放",

       resetZoomTitle:"恢复图表",

       shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"].,

       thousandsSep:",",

       weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"].

    }

  });

  $("#container").highcharts({

    // Highcharts 代码

  });

    注意:Highcharts.setOptions({}) 属于全局配置,代码是放在  $("#container").highcharts({}) 外面。
 
6、如何去掉图例单击事件?
    
    即如何使点击图例(Legend)不隐藏对应的序列(Series),设置代码是:
    plotOptions: {
        series: {
           events: {
              legendItemClick: function(event) { 
                 return false;  //return false 即可禁用LegendIteml,防止通过点击item显示隐藏系列
              }
          }
       }
    }
 
7、如何在初始化的时候隐藏某个线条(或序列Series)?
 
    对应的效果是

 

    即默认隐藏某个(或多个)线条,实现代码是

    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],

        visible: false//默认不显示

    }, {

        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],

    }]

    该代码出自在线演示:通过点击图例显示与隐藏数据列

    那么问题来了,眼神好的小伙伴就又有疑惑了,“visible” 这个属性在API中没有的,为什么你可以这么做?

    答:“在api中没有的属性在样例中却使用了这是什么个意思?

    “您真是个活字典”, !-_- 

新手必看】Highcharts的100个基础问答

标签:

原文地址:http://www.cnblogs.com/jinhaoObject/p/4571294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!