Highcharts 中文社区

 找回密码
 立即注册

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

2014-12-2 10:59| 发布者: 群大大| 查看: 20116| 评论: 9|来自: 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、柱状图datalabels当值大于一定得数字时,显示在中间,当小于这个数字,是显示在柱状图的上面如图所示

可以在每个节点的定义中对该节点的dataLabels进行设置。可以判断数值,而决定显示的位置


8、怎么去掉曲线图的默认点击效果


设置states中的状态

plotOptions: {

  series: {

    states: {

      hover: {

        enabled: false

      }

    }

  }

}


9、Highcharts中柱状图怎么显示字符串数据?例:比如其中的数据为【"12",''12.5%"】


是在纵坐标上显示0%、10%、.......100%形式?如果是,那就需要在

yAxis:(

    labels:{

        format:'{value}%'

    }

)

提示框中显示,例如图中电子商务18.8是百分比数据,代码如下

tooltip:{

    pointFormat:'\u25CF {series.name}: {point.y}%
.'

    }

}

10、图表如何实现分层颜色显示、文字提醒?

用标示区( plotBands )即可实现,教程地址:http://www.hcharts.cn/docs/index.php?doc=basic-plotBands


11、跨图表类型下钻?(例:饼图下钻后以柱形图显示

addSeries() 的时候设置下钻图表类型

 chart.addSeries({

    name: name,

    data: data,

    type: 'spline' // 设置数据列类型

    color: color || 'white',

}, false);



12、highcharts下钻后,显示返回按钮?

drilldown组件自带的。其中按钮文字通过lang的drillUpText: String设置。


13、关于Highcharts出现uncaught exception: Highcharts error #13: www.highcharts.com/errors/13

Error 13 错误的原因是没有指定图表的渲染容器,对应的可以到下面两个地方查询:

关于图表渲染容器见中文教程: 


14、关于highcharts出现Error #15错误;

Error # 15 : 属于未排序的数据
 
一般是因为 x 轴的数据(时间或数值)未按照小到大排序,排序一下就ok了。
 Error #15 错误信息查询地址:

 

15、Highcharts下钻后,如何显示返回按钮及自定义位置样式;

drilldown组件下钻自带,其中按钮文字通过lang的drillUpText: String设置


16、从左到右的动画效果;

 设置 plotOptions.series.animation= false 即可,即

 // 省略代码

xAxis: {

    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'

    ]

},

plotOptions: {

    series: {

        animation: false

    }

},

yAxis: {

    title: {

        text: 'Temperature (°C)'

    },

    plotLines: [{

        value: 0,

        width: 1,

        color: '#808080'

    }]

},

// ...


17、highcharts坐标轴、节点、类别名对齐问题;

可以用 pointPlacement 来调节,见:http://code.hcharts.cn/hcharts.cn/hhhGzm



18、highcharts柱状图柱子和刻度线位置默认居中,如何偏右;

在xAxis配置中设置tickmarkPosition为'on'。


19、如何将0值设置在X轴上;(默认是居中)

tickPositions指定y轴的刻度从0开始

效果见:http://code.hcharts.cn/highcharts/hhhhz1


20、实现highcharts图表双击事件;

Highcharts 默认并没有提供图表双击事件接口,这里用很简单的方法实现,代码如下:

var clickDetected = false;

 $("#container").highcharts({

    chart: {

        events: {

            click: function(e) {

                if (clickDetected) {

                    console.log("Double click");

                    console.log(e);

                } else {

                    clickDetected = true;

                    setTimeout(function() {

                        clickDetected = false;

                    }, 500);

                }

            }

        }

    }

});

 另外,可以用官方插件 Custom Events ”来实现。


21、关于 new Date()

new Date() 默认是获取当前时间的时间戳,通过传入 ‘YYYY-MM-DD hh:mm:ss’ 格式时间则可以获取指定时间的时间戳,例如:
var date = new Date();     
new Date('2015-10-26 17:59:05')

这里有关于 javascript 时间详细的文档:http://www.w3school.com.cn/jsr ... e.asp


22、百分比堆栈柱状图数据提示框数据项颜色?

tooltip: {
  shared: true,
  pointFormatter: function() {
    if(this.percentage  < 10 ) return null;
    return '' + this.series.name + '


23、不联网的状态下,图表导出失败

目前有两种方式:

1)、自己在本地搭建导出服务

关于本地搭建导出服务器详见:http://bbs.hcharts.cn/thread-346-1-1.html ,另外,中文论坛中有非常多关于导出的帖子。

2)、利用客户端导出扩展来实现

关于客户端导出详见:http://www.hcharts.cn/p/highcharts-export-clientside.php


24、动态刷新 如何用url载入数据时时刷新

参考:http://code.hcharts.cn/hcharts.cn/hhhhu0

结合例子及加上定时器(setInterval)定时执行就行

27、关于折线上数据点的大小

设置markerradius,就可以控制大小。

26、通过json获取数据,当选择查询条件查询后,页面表格字段数据、数据库中数据发生变化,动态数据加载如何实现;

在URL后加上请求条件的参数,就可以了。

26、面积图,怎样分阶段显示,每一个阶段显示一种颜色?

55

路过
3

雷人

握手
3

鲜花
1

鸡蛋

刚表态过的朋友 (62 人)

发表评论

最新评论

引用 409903207 2018-1-9 11:39
学习学习
引用 hichartsglm 2016-12-30 09:02
你好,想要实现鼠标移到点上才显示提示框而不是鼠标移到图上就会去找最近点显示,教程里有stickyTracking,但是具体不知道怎么设置,zaitooltip里面设置了没有效果 ,求指教
tooltip: {
            valueSuffix: '°C',
            stickyTracking:false
        },
引用 猎风鹰 2016-10-8 20:00
你好,在吗大神。
想制作出既有柱形图也有折线图的那种图表,已搜索到该样式的代码,但是要从数据库中读取数据,请问在这个series部分该怎么写呢
series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
引用 彭芳 2016-9-13 15:31
会继续更新的,有更好的答案也可以提交到客服处。
引用 小情绪 2016-1-28 17:25
Y轴数据怎么变呀
引用 lipeng_3g 2015-6-19 10:35
这才不到十个,不是一百个吗
引用 nageqd 2015-3-19 13:35
希望增加呀, 新手期盼中
引用 rencht 2015-1-19 10:33
会更新吗这个?期待更多内容
引用 bigbug 2014-12-12 17:35
这个   没有一百个

查看全部评论(9)

返回顶部