`

highchart的几种数据组织形式

 
阅读更多

http://www.hcharts.cn/test/index.php?from=demo&p=10

 

1. categories 单独放在外面

$(function () {
    $('#container').highcharts({
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            type: 'column'
        }]
    });
});

 

 

2. categories放在series中

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [['A',7.0], ['B',6.9], ['C',9.5]],
            type: 'column'
        }]
    });
});

 

3.  categories放在series中的另外一种形式

series: [{
            name: 'Tokyo',
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            type: 'column'
        }]

 

 

4.  name,x,y  放在一起, 此外还可以放入其它更多参数

data: [{
	name: 'Point 1',
	color: '#00FF00',
	x: 1
	y: 0
}, {
	name: 'Point 2',
	color: '#FF00FF',
	x: 1
	y: 5
}]

 

参考:

http://www.hcharts.cn/api/index.php#series.data

 

 

分享到:
评论

相关推荐

    highChart后台动态获取数据

    在"highChart后台动态获取数据"这个主题中,我们主要探讨如何利用HighCharts结合后端数据来创建动态图表。 1. **HighCharts基本结构与配置** HighCharts的基本结构包括一个HTML容器元素和JavaScript代码,用于初始...

    highchart组织架构图.zip

    组织架构图是一种用来表示公司、团队或项目中人员之间关系的图形化工具。在Highcharts中,组织架构图通常使用树形图或者网络图来展示。这种图可以清晰地展示每个角色、部门及其相互间的层级关系,便于理解公司的...

    matlab开发-HighChart

    总的来说,"matlab开发-HighChart"项目提供了一种利用MATLAB的强大计算能力和HighChart的优秀可视化效果相结合的方式,使得科学家和工程师能在MATLAB环境中创建出互动且具有吸引力的数据可视化作品。通过不断实践和...

    Highchart Demo

    5. **数据加载**:数据可以通过两种方式提供:静态数据直接写在配置对象的`series.data`中,或者通过Ajax动态加载。动态加载时,可以使用`Highcharts.Data`模块处理各种格式的数据源,如CSV、JSON等。 在"Highchart...

    HighChart API

    HighChart API 是一款强大的JavaScript图表库,用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能,使得...通过熟练掌握HighChart API,你可以创建出适应各种需求的高质量数据可视化应用。

    highchart

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如柱状图、折线图、饼图等。它具有丰富的定制选项,能够满足开发者在数据展示方面的各种需求。以下是对Highcharts的一些关键知识...

    HighChart曲线图

    HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图等,曲线图是其中一种常见且实用的图表类型。 2. **曲线图的应用**:曲线图通常用于展示数据随时间的变化趋势,比如股票价格、气温变化、销售业绩等。它...

    HighChart

    HighChart是一款广泛应用于Web开发中的数据可视化库,它允许开发者创建出交互性强、美观的图表。HighChart基于JavaScript,支持各种浏览器,包括IE9及以上的版本。它以其灵活性、丰富的图表类型和良好的性能赢得了...

    引用:highChart控件不错,挺漂亮

    HighChart是一款广泛应用于Web开发中的数据可视化库,它以其丰富的图表类型、良好的交互性和美观的样式赢得了开发者们的喜爱。在本文中,我们将深入探讨HighChart控件的核心特性、使用方法以及如何结合源码进行定制...

    highchart中文帮助文档

    - **color**: 设定图表的颜色方案,通常以数组形式表示,如`['#058DC7', '#50B432']`。Highcharts默认提供了多种颜色方案,当图形数量超过颜色种类时,会循环使用颜色。 - **自定义颜色方案**: 可通过`Highcharts....

    highchart.rar

    创建Y轴双数据的Highcharts图表,主要涉及以下几个关键步骤: 1. **引入Highcharts库**:首先,你需要在HTML文件中引入Highcharts的JavaScript文件,通常包括`highcharts.js`和可能需要的主题文件(如`highcharts-...

    highchart源码及实例

    Highcharts以其易用性、灵活性和丰富的图表类型而广受欢迎,被广泛应用于数据可视化领域。 一、Highcharts基本概念 1. 图表类型:Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、瀑布图、...

    highchart源码

    highchart源码

    highchart(api)

    这个压缩包文件的标题“highchart(api)”显然与Highcharts的API使用有关,可能包含了一些关于如何利用Highcharts API来绘制图表的示例或教程。 Highcharts的核心功能包括折线图、柱状图、饼图、散点图等多种图表...

    highchart c# demo

    总的来说,这个"highchart c# demo"实例涵盖了以下几个关键知识点: 1. 集成Highcharts到C# ASP.NET项目中。 2. 在C#后端生成JSON数据,用于前端图表的渲染。 3. 使用Ajax在前端获取后端数据并初始化Highcharts图表...

    HighChart 3.0.2 Demo+API

    HighChart的核心功能包括但不限于以下几点: 1. **图表类型多样**:HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、甘特图、热力图等,满足了不同数据展示的需求。 2. **交互性**:用户可以...

    highchart 3 离线 API 完整版

    3. **数据系列(Series)**:数据是图表的核心,每个系列代表一种类型的数据,通过`series: [{data: [1, 2, 3]}]`来定义。可以有多个系列,每个系列可以通过颜色、名称和其他属性进行区分。 4. **X轴与Y轴(Axes)*...

    highchart的例子

    highchart的一个例子

Global site tag (gtag.js) - Google Analytics