`

highcharts key point

JavaScripthighcharts 
阅读更多

 

highcharts中文教程
http://www.hcharts.cn/docs/index.php?doc=basic-chart

事件（在chart这个object里设置）
例子1（click）:

    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                click: function (event) {
                    //this.renderer.label().add()
                    var label = this.renderer.label(
                            'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
                            event.xAxis[0].axis.toPixels(event.xAxis[0].value),
                            event.yAxis[0].axis.toPixels(event.yAxis[0].value)
                        )
                            .attr({
                                fill: Highcharts.getOptions().colors[0],
                                padding: 10,
                                r: 5,
                                zIndex: 8
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();

                    setTimeout(function () {
                        label.fadeOut();
                    }, 1000);
                }
            }
        },

        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]
        }]
    });



例子2（drilldown）:

    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {
                        //this即是chart本身
                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5],
                                        ['Oranges', 7],
                                        ['Bananas', 2]
                                    ]
                                },
                                'Cars': {
                                    name: 'Cars',
                                    data: [
                                        ['Toyota', 1],
                                        ['Volkswagen', 2],
                                        ['Opel', 5]
                                    ]
                                }
                            },
                            /*e.point.name获取点击的那个点的名字
                             *name这个属性是series里定义的
                             */
                            series = drilldowns[e.point.name];

                        // Show the loading label.图标的loading这样加
                        chart.showLoading('Simulating Ajax ...');

                        setTimeout(function () {
                            chart.hideLoading();//隐藏loading提示
                            chart.addSeriesAsDrilldown(e.point, series);
                        }, 1000);
                    }

                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                //这个datalabel不是tooltip，而是每个点上的标签
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 2,
                drilldown: true
            }, {
                name: 'Cars',
                y: 4,
                drilldown: true
            }]
        }],
    });



例子3（图表放大细化）:

 $('#container').highcharts({

        chart: {
            zoomType: 'x'
        },

        title: {
            text: 'Hide overlapping data labels'
        },

        series: [{
            data: (function (arr, len) {
                var i;
                for (i = 0; i < len; i = i + 1) {
                    arr.push(i);
                }
                return arr;
            }([], 50)),
            dataLabels: {
                enabled: true,
                y: -5
            }
        }]

    });

	//button
    $('#setextremes').click(function () {
        $('#container').highcharts().xAxis[0].setExtremes(10, 15);
    });

    $('#unsetextremes').click(function () {
        $('#container').highcharts().xAxis[0].setExtremes();
    });



例子4（两个y轴）:

$(function () {
    $('#container').highcharts({
        chart: {
            marginRight: 80 // like left
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            lineWidth: 1,
            title: {
                text: 'Primary Axis'
            }
        }, {
            lineWidth: 1,
            opposite: true,
            title: {
                text: 'Secondary Axis'
            }
        }],

        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]
        }, {
            type: 'spline',
            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],
            yAxis: 1
        }]
    });
});



例子5（tooltip当中this的属性）:

 

$('#container').highcharts({ 
      plotOptions: { 
            line:{
                 events :{ 
                     click:function(){ 
                        alert('x='+event.point.x + ", y=" + event.point.y + ", extra=" + event.point.extra); 
                     } 
                  } 
              } 
       }, 
       tooltip:{
             formatter:function(){ 
                   return '<b>' + this.series.name + '</b>: y=' + this.y + ', extra='+this.point.extra;
             }  
        }, 
       series: [{ data: [ 
           {y:29.7,extra:'hhh'}, 
           {y:71.5,extra:'2333'}, 
           {y:106.4,extra:'1122'}, 
           {y:129.2,extra:'vvvv'} ] }]
});
 
例子6（自定义legend点击事件，隐藏其他只显示点击serie）:

 

plotOptions: {
    series: {
        events: {
            legendItemClick: function(e) {
                var index = this.index;

                var series = this.chart.series;

                if (!series[index].visible) {

                    for (var i = 0; i < series.length; i++) {

                        var s = series[i];

                        i === index ? s.show() : s.hide();
                    }
                }

                return false;
            }
        }
    }
}

 

---关键点---
知识点1：
定义图的类型可以在chart的object选项里设置，也可以在series这里设置

series: [{
            type: 'column',
            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]
        }, {
            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].reverse()
        }]



知识点2：
label是坐标轴上刻度值的显示格式

xAxis: {
            reversed: false,
            title: {
                enabled: true,
                text: 'Altitude'
            },
            [color=blue]labels: {
                formatter: function () {
                    return this.value + 'km';
                }
            },[/color]
            maxPadding: 0.05,
            showLastLabel: true
        }



 知识点3：
colors定义series颜色，数据列调用颜色的方式是第 n 个数据列使用第 n 个颜色数组里的值，当序列的数量超过颜色数组的长度，后续的序列将会从头调用。

 

$('#container').highcharts({
        chart: {
            type: 'pie'
        },
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],

        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]
        }]
    });
 
colorByPoint属性表示是为每一个series匹配一种颜色还是为每一个点匹配一种颜色
plotOptions: {
            column: {
               colorByPoint:true
            }
        }
 

 

 知识点4：

pointStart、pointInterval、tooltip还可以配在series里

 

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%e of %b'
            }
        },

        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: 24 * 3600 * 1000, // one day
            tooltip: {
                valueSuffix: ' mm'
           }
        }]
    });
});
 

 

知识点5：
legend的相关处理
legend: {
    layout: 'vertical',
    backgroundColor: '#FFFFFF',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    labelFormatter: function() {
        /*
         * 获取数据列下标，通过下标判断做一系列处理
         * 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息）
         */
        var index = this._i;

        // return null 则可以不显示图例项
        return index === 0 ? null : this.name;
    }
}
 
知识点6：
公共设置
Highcharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
            resetZoom: '重置',
            resetZoomTitle: '重置缩放比例'
        }
    });
 
知识点7：
要对highcharts当中的元素进行操作，如何找到元素？
控制台console查看对象属性：
1.对象的相应函数在对象的__proto__属性里面（主要看这点）
2.通常有animate相关属性
3.通常有jQuery1725832659457895这样的属性（应该是代表真正的元素，因为该属性下有events属性）
 
知识点8：
------------------------------------------
chart:
    event:    click

对应的获取选中的点是通过 chart.getSelectedPoints() 函数来实现的
饼图的白色间隔是linewidth的原因，相同情况产生于area图表
------------------------------------------
$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 48 * 3600 * 1000		//表示label之间的间隔
        },

        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: 24 * 3600 * 1000 // one day	，表示取单位一天为每一个取值点	
        }]
    });
});

-------------------

plotOptions: {
    line: {			//针对line图标的公共设置
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.x + "	" + this.y;
            },
            // format: "{x} 	 {y}"
        }
    }
}
 
  • 大小: 7.9 KB
分享到：
| 主图选择，附图放大进行主图所选区域的观察 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery Highcharts jquery Highcharts

    Highcharts是一款强大的JavaScript图表库，它能够为网页和应用程序提供丰富多样的数据可视化效果。基于jQuery库，Highcharts使得在Web页面上创建交互式图表变得简单易行。在这个压缩包中，很可能包含了Highcharts的...

    highcharts

    Highcharts是一款强大的JavaScript图表库，用于在Web上创建交互式的图表和图形。它支持各种类型的图表，包括柱状图、折线图、饼图、散点图等，为数据可视化提供了丰富的选择。以下是对Highcharts及其相关知识点的...

    Highcharts-9.3.2.zip

    标题中的"Highcharts-9.3.2.zip"表明这是一个包含Highcharts库版本9.3.2的压缩文件，开发者可以下载并解压来使用这个版本的库。 在描述中提到了几个关键点，首先，Highcharts兼容IE6及以上的浏览器，这在现今许多...

    Highcharts

    Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种丰富的数据可视化效果，广泛应用于Web应用程序中。这款库以其易用性、灵活性和丰富的图表类型而备受赞誉。在Highcharts中，你可以选择不同的图表...

    Highcharts图表库 v9.3.3.zip

    Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，帮助开发者轻松创建交互式的图表。v9.3.3是Highcharts的一个更新版本，带来了更多功能...

    highcharts简单的饼图demo

    Highcharts是一款强大的JavaScript图表库，用于在Web上创建各种数据可视化图表，如柱状图、折线图、饼图等。在这个"highcharts简单的饼图demo"中，我们将深入探讨如何利用Highcharts来构建一个基本的饼图，并根据...

    highcharts示例代码（官方例子）

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建出各种美观且功能丰富的图表，包括折线图、柱状图、饼图、散点图等。这款库以其易用性、灵活性和高性能著称，适用于数据可视化的...

    highcharts-zh_CN.js 文件下载

    decimalPoint: '.', thousandsSep: ',', // 其他中文属性... } }); ``` 3. **Highstock支持**：Highstock是Highcharts的一个扩展，专门用于绘制时间序列数据的图表，如股票走势、气象数据等。此语言包同样...

    3D图表Highcharts(3D)

    Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建出各种精美、交互性强的2D和3D图表。在“3D图表Highcharts”这个主题中，我们将深入探讨如何利用Highcharts来实现三维图表的制作，以及它在数据可视化...

    HighCharts

    Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...

    Highcharts最全示例程序

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，如折线图、柱状图、饼图、散点图等。本压缩包"Highcharts-2.3.2"包含了Highcharts 2.3.2版本的源码和...

    Highcharts-2.2.5源码

    Highcharts是一款强大的JavaScript图表库，用于在Web上创建交互式的、高质量的数据可视化图表。它能够以SVG（在现代浏览器中）或VML（在旧版IE中）格式绘制图表，支持多种图表类型，如柱状图、折线图、饼图、散点图...

    highcharts的js文件

    Highcharts是一款强大的JavaScript图表库，用于在Web应用中创建各种数据可视化效果，如柱状图、曲线图、饼图等。这个压缩包包含的是Highcharts的JavaScript文件，这些文件是生成图表所必需的。 首先，Highcharts的...

    highcharts去掉水印的方法

    ### Highcharts去掉水印的方法 在使用Highcharts这一强大的JavaScript图表库时，有时我们可能会遇到一个默认设置：图表上带有官方的水印标志。对于一些商业应用或是希望提高图表美观度的需求来说，去除这些水印是...

Magicbox
Global site tag (gtag.js) - Google Analytics