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后台动态获取数据"这个主题中,我们主要探讨如何利用HighCharts结合后端数据来创建动态图表。 1. **HighCharts基本结构与配置** HighCharts的基本结构包括一个HTML容器元素和JavaScript代码,用于初始...
组织架构图是一种用来表示公司、团队或项目中人员之间关系的图形化工具。在Highcharts中,组织架构图通常使用树形图或者网络图来展示。这种图可以清晰地展示每个角色、部门及其相互间的层级关系,便于理解公司的...
总的来说,"matlab开发-HighChart"项目提供了一种利用MATLAB的强大计算能力和HighChart的优秀可视化效果相结合的方式,使得科学家和工程师能在MATLAB环境中创建出互动且具有吸引力的数据可视化作品。通过不断实践和...
5. **数据加载**:数据可以通过两种方式提供:静态数据直接写在配置对象的`series.data`中,或者通过Ajax动态加载。动态加载时,可以使用`Highcharts.Data`模块处理各种格式的数据源,如CSV、JSON等。 在"Highchart...
HighChart API 是一款强大的JavaScript图表库,用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能,使得...通过熟练掌握HighChart API,你可以创建出适应各种需求的高质量数据可视化应用。
Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如柱状图、折线图、饼图等。它具有丰富的定制选项,能够满足开发者在数据展示方面的各种需求。以下是对Highcharts的一些关键知识...
HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图等,曲线图是其中一种常见且实用的图表类型。 2. **曲线图的应用**:曲线图通常用于展示数据随时间的变化趋势,比如股票价格、气温变化、销售业绩等。它...
HighChart是一款广泛应用于Web开发中的数据可视化库,它允许开发者创建出交互性强、美观的图表。HighChart基于JavaScript,支持各种浏览器,包括IE9及以上的版本。它以其灵活性、丰富的图表类型和良好的性能赢得了...
HighChart是一款广泛应用于Web开发中的数据可视化库,它以其丰富的图表类型、良好的交互性和美观的样式赢得了开发者们的喜爱。在本文中,我们将深入探讨HighChart控件的核心特性、使用方法以及如何结合源码进行定制...
- **color**: 设定图表的颜色方案,通常以数组形式表示,如`['#058DC7', '#50B432']`。Highcharts默认提供了多种颜色方案,当图形数量超过颜色种类时,会循环使用颜色。 - **自定义颜色方案**: 可通过`Highcharts....
创建Y轴双数据的Highcharts图表,主要涉及以下几个关键步骤: 1. **引入Highcharts库**:首先,你需要在HTML文件中引入Highcharts的JavaScript文件,通常包括`highcharts.js`和可能需要的主题文件(如`highcharts-...
Highcharts以其易用性、灵活性和丰富的图表类型而广受欢迎,被广泛应用于数据可视化领域。 一、Highcharts基本概念 1. 图表类型:Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、瀑布图、...
highchart源码
这个压缩包文件的标题“highchart(api)”显然与Highcharts的API使用有关,可能包含了一些关于如何利用Highcharts API来绘制图表的示例或教程。 Highcharts的核心功能包括折线图、柱状图、饼图、散点图等多种图表...
总的来说,这个"highchart c# demo"实例涵盖了以下几个关键知识点: 1. 集成Highcharts到C# ASP.NET项目中。 2. 在C#后端生成JSON数据,用于前端图表的渲染。 3. 使用Ajax在前端获取后端数据并初始化Highcharts图表...
HighChart的核心功能包括但不限于以下几点: 1. **图表类型多样**:HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、甘特图、热力图等,满足了不同数据展示的需求。 2. **交互性**:用户可以...
3. **数据系列(Series)**:数据是图表的核心,每个系列代表一种类型的数据,通过`series: [{data: [1, 2, 3]}]`来定义。可以有多个系列,每个系列可以通过颜色、名称和其他属性进行区分。 4. **X轴与Y轴(Axes)*...
highchart的一个例子