HighChart 基本东西

简介

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

使用方法

安装

引用js库文件

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

如果要配合其他的js库使用，需要引入adapter适配器：

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.2/mootools-yui-compressed.js" type="text/javascript"></script>

<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>

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

初始化chart对象

可以写在HTML文件中也可以单独写在一个js文件中。初始化代码如下：

var chart1; // globally available

$(document).ready(function() {

      chart1 = new Highcharts.Chart({

        chart: {

           renderTo: 'container',

           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]

         }]

      });

   });

参数设置：

参数是一个嵌套的JSON对象，可以使字符串，数字，数组，事件等。当使用new Highcharts.Chart来创建该chart对象，参数是必须的。详细设置参考 参数处理。

Axes：

参数处理

不推荐的代码：

// Bad code:

var options = new Object();

 

options.chart = new Object();

options.chart.renderTo = 'container';

options.chart.type = 'bar';

 

options.series = new Array();

options.series[0] = new Object();

options.series[0].name = 'Jane';

options.series[0].data = new Array(1, 0, 4);

推荐代码格式：

// Good code:

var options = {

    chart: {

       renderTo: 'container',

       defaultSeriesType: 'bar'

    },

    series: [{

        name: 'Jane',

        data: [1, 0, 4]

    }]

};

动态表格

当chart对象创建以及渲染在页面后，可以通过chart提供的API对chart，axes，series，point等进行update, remove, addSeries, addPoints 等操作。

Exporting module

API参考手册

官网地址：http://www.highcharts.com/

API参考地址：http://www.highcharts.com/ref/

 

API说明

对象结构

Chart总对象结构

var chart = new Highcharts.Chart({

chart: {...},

colors: [...]

credits: {...},

global: {...},

labels: {...},

lang: {...},

legend: {...},

loading: {...},

plotOptions: {...},

point: {...},

series: [{...}],

subtitle: {...},

symbols: [...]

title: {...},

tooltip: {...},

xAxis: {...},

yAxis: {...},

// exporting module

exporting: {...},

navigation: {...}

});

Chart对象结构

chart: {

alignTicks: true,

animation: true,

backgroundColor: "#FFFFFF",

borderColor: "#4572A7",

borderRadius: 5,

borderWidth: 0,

className: "",

defaultSeriesType: ,

events: {...},

height: null,

ignoreHiddenSeries: true,

inverted: false,

margin: [null],

marginTop: null,

marginRight: 50,

marginBottom: 70,

marginLeft: 80,

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderColor: "#C0C0C0",

plotBorderWidth: 0,

plotShadow: false,

reflow: true,

renderTo: null,

resetZoomButton: {...},

selectionMarkerFill: rgba(69,114,167,0.25),

shadow: false,

showAxes: false,

spacingTop: 10,

spacingRight: 10,

spacingBottom: 15,

spacingLeft: 10,

style: ,

type: "line",

width: null,

zoomType: ""

},

Chart.event对象结构

events: {

addSeries: ,

click: ,

load: ,

redraw: ,

selection:

},

Chart.resetZoomButton对象结构

resetZoomButton: {

position: ,

relativeTo: "plot",

theme:

},

colors: [...]对象

一个定义颜色的数组，当chart的颜色用完了，再从数据第一位循环往后使用。

colors: [

         '#4572A7',

         '#AA4643',

         '#89A54E',

         '#80699B',

         '#3D96AE',

         '#DB843D',

         '#92A8CD',

         '#A47D7C',

         '#B5CA92'

]

credits: {...}对象

图表下面添加一个版权信息。

credits: {

enabled: true,

position: ,

href: "http://www.highcharts.com",

style: ,

text: "Highcharts.com"

},

Global对象

对象结构：

global: {

canvasToolsURL: "http://www.highcharts.com/js/canvas-tools.js",

useUTC: true

},

必须使用HightChart.setOption方法来定义该参数。

Highcharts.setOptions({

         global: {

                   useUTC: false，

                   canvasToolsURL：“”

         }

});

Labels对象

labels: {

items: [{

html: "",

style:

}],

style:

},

Lang对象

lang: {

decimalPoint: ".",

downloadPNG: "Download PNG image",

downloadJPEG: "Download JPEG image",

downloadPDF: "Download PDF document",

downloadSVG: "Download SVG vector image",

exportButtonTitle: "Export to raster or vector image",

loading: Loading...,

months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

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

printButtonTitle: "Print the chart",

resetZoom: Reset zoom,

resetZoomTitle: Reset zoom level 1:1,

thousandsSep: ",",

weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

},

使用HightCharts.setOption来设置该对象属性。

Highcharts.setOptions({

         lang: {

                   months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',

                            'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],

                   weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']

         }

});

Legend对象

legend: {

align: "center",

backgroundColor: null,

borderColor: #909090,

borderRadius: 5,

borderWidth: 1,

enabled: true,

floating: false,

itemHiddenStyle: ,

itemHoverStyle: ,

itemStyle: ,

itemWidth: null,

layout: "horizontal",

labelFormatter: ,

lineHeight: 16,

margin: 15,

reversed: false,

rtl: false,

shadow: false,

style: ,

symbolPadding: 5,

symbolWidth: 30,

verticalAlign: "bottom",

width: null,

x: 0,

y: 0

},

是一个含有图表对象中的组或者点属性名称以及图标的属性框。

如图所示：Series1,Series2

Loading对象

loading: {

hideDuration: 100,

labelStyle: ,

showDuration: 100,

style:

},

当家在数据还未展示到页面中来，会在页面中显示一个Loading.. 字样。该属性只能设置样式以及显示和消失时间。

plotOptions对象

plotOptions: {

area: {...},

areaspline: {...},

bar: {...},

column: {...},

line: {...},

pie: {...},

series: [{...}],

scatter: {...},

spline: {...}

},

该对象可以控制图表上每一个系列对象属性的封装对象。其子对象可以覆盖属性。

plotOptions.series

通用属性：

series: [{

allowPointSelect: false,

animation: true,

color: ,

connectNulls: false,

cropThreshold: 300,

cursor: '',

dashStyle: null,

dataLabels: {...},

enableMouseTracking: true,

events: {...},

id: null,

lineWidth: 2,

marker: {...},

point: {...},

pointStart: 0,

pointInterval: 1,

selected: false,

shadow: true,

showCheckbox: false,

showInLegend: true,

stacking: null,

states: {...},

stickyTracking: true,

tooltip: {},

turboThreshold: 1000,

visible: true,

zIndex: null

}],

scatter: {...},

spline: {...}

},

Point对象

point: {

color: null,

dataLabels: ,

events: {...},

id: null,

marker: {...},

legendIndex: undefined,

name: "",

sliced: false,

x: null,

y: null

},

Series

图表实际显示数据来自于该对象属性值，数据展示效果来自plotOption对象定义的数据。

series: [{

data: "",

dataParser: ,

dataURL: null,

legendIndex: undefined,

name: "",

stack: null,

type: "line",

xAxis: 0,

yAxis: 0

}],

Data是一个非常关键的属性：

data : Array<Mixed>

An array of data points for the series. The points can be given in three ways:

A list of numerical values. In this case, the numberical values will be interpreted and y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. If the axis is has categories, these will be used. Example:

data: [0, 5, 3, 5]

A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:

data: [[5, 2], [6, 3], [8, 2]]

A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:

data: [{

         name: 'Point 1',

         color: '#00FF00',

         y: 0

}, {

         name: 'Point 2',

         color: '#FF00FF',

         y: 5

}]

Defaults to "".

Subtitle

subtitle: {

align: "center",

floating: false,

text: "",

style: ,

verticalAlign: "top",

x: 0,

y: 30

},

Symbol

symbols

An array containing the default symbols for the series point markers. When all symbols are used, new symbols are pulled from the start again. Defaults to:

symbols: [

         'circle',

         'diamond',

         'square',

         'triangle',

         'triangle-down'

]