`
327646410
  • 浏览: 30863 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

highchart ,highstock 笔记1

阅读更多
1.chartType 图形的种类
(1)Line with markers and shadow
series : [{
name : 'AAPL Stock Price',
data : data,
marker : {
enabled : true,
radius : 3
},
shadow : true,
tooltip : {
valueDecimals : 2
}
}]
(2) type: 'spline',
(3)step line: 
   series: [{
    step: true
   }]:
(4)area
series : [{
name : 'AAPL Stock Price',
data : data,
type : 'area',
threshold : null,
tooltip : {
valueDecimals : 2
},
fillColor : {
linearGradient : {
x1: 0, y1: 0, x2: 0, y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
}
}]
(5) type : 'areaspline',
(6)chart: { renderTo: 'container',
type: 'arearange'
},----areasplinerange
(7)OHLC
(8)type: 'columnrange'
(9)Point markers only
series : [{
name : 'AAPL Stock Price',
data : data,
lineWidth : 0,
marker : {
enabled : true,
radius : 2
},
tooltip: {
valueDecimals: 2
}
}]



2.highstock设置时间轴,按时间实际间隔来显示
xAxis: {ordinal:false,
    title: {
text: '时间值'
}
},



3.styled  scrollbar
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
    }










分享到:
评论

相关推荐

    matlab开发-HighChart

    data = [1, 2, 3, 4, 5]; jsonData = jsonencode(struct('name', 'Series1', 'data', data)); web.write('temp.html', ['<script src="https://code.highcharts.com/highcharts.js"></script>', ... '...

    HighChart API

    1. **初始化图表**: 创建HighChart图表的第一步是通过`Highcharts.chart()`方法来初始化。这个方法接受两个参数:一个容器ID(用于放置图表的HTML元素)和一个配置对象,其中包含了图表的各种设置。 2. **系列...

    Highchart Demo

    在实际应用中,Highcharts不仅限于基本的配置,还可以结合其他库如Highstock扩展时间序列数据的支持,或者Highmaps实现地理地图的可视化。此外,Highcharts与服务器端数据的交互也是其强大之处,可以轻松地从后端...

    HighChart曲线图

    1. **HighChart简介**:HighChart是一个基于纯JavaScript的图表库,它允许开发者通过简单的API创建出高质量、动态的数据可视化图表。HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图等,曲线图是其中一...

    highchart

    1. **安装与引入**: 首先,你需要在项目中引入Highcharts库。可以通过CDN链接直接在HTML文件中引用,或者下载到本地项目中使用。通常,我们会引入`highcharts.js`主文件以及需要的模块,例如`exporting.js`用于...

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

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

    highstock-2.1.5

    1. `highstock.js`:核心库文件,包含了绘制图表所需的所有功能。 2. `highcharts-more.js`:扩展库,包含了额外的图表类型,如饼状图、柱状图等。 3. `adapter.addEvent.js`:事件处理适配器,用于处理图表与用户的...

    HighChart

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

    highchart中文帮助文档

    ### Highcharts中文帮助文档知识点详解 #### Chart图表区选项 Highcharts是一款强大的JavaScript图表库,其图表区选项允许用户精细调整图表的外观和行为。以下是一些关键的配置项: - **backgroundColor**: 设置...

    highcharts、highstock下载功能改成自己的URL,不用连外网也能使用此功能。适用于VS2010、MVC3.0

    1. **创建后端服务**:在VS2010中,使用C#编写一个MVC控制器,这个控制器将接收Highcharts的配置对象,比如JSON格式的数据,该数据包含了图表的所有设置。 2. **解析配置**:解析接收到的JSON数据,还原Highcharts...

    highchart源码

    highchart源码

    highchart(api)

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

    highchart源码及实例

    1. 图表类型:Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、瀑布图、热力图等,可以根据需求选择合适的图表展示数据。 二、安装与引入 要使用Highcharts,首先需要在项目中引入其...

    highchart的例子

    highchart的一个例子

    bootstrap+EasyUI+highchart中文参考手册

    bootstrap+EasyUI+highchart中文参考手册,本人是后端开发,对前端不是很熟悉,所以在做项目的时候采用了这三个技术,因为是框架所以用起来开发前端很方便,果断选择,后端程序员也能开发出漂亮的前端页面了

    highchart.rar

    在这个名为"highchart.rar"的压缩包中,我们很显然会找到与Highcharts相关的代码示例,尤其是关于如何实现Y轴双数据的设置。 在Web开发中,数据可视化是一个至关重要的环节,它能够帮助用户更好地理解复杂的数据...

    highchart c# demo

    这个"highchart c# demo"示例将指导我们如何在C#后端生成数据,并通过JavaScript在前端展示。 首先,我们需要理解Highcharts的基本结构。Highcharts的核心是HTML5 `<div>`标签,我们在这个标签内插入JavaScript代码...

    HighChart 3.0.2 Demo+API

    1. **图表类型多样**:HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图、甘特图、热力图等,满足了不同数据展示的需求。 2. **交互性**:用户可以通过鼠标悬停、点击、拖拽等方式与图表进行...

    highchart 统计图 js统计图

    在Highstock中,你可以通过`series.type`设置为'candlestick'来创建K线图,并通过`xAxis.type`设为'time'来处理时间轴。还可以添加诸如`tooltip`、`navigator`和`scrollbar`等高级功能,增强图表的交互性和可操作性...

Global site tag (gtag.js) - Google Analytics