问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
highcharts官方例子：，
需要实现如雪球：，这样的分时图效果，x轴固定时间，然后有数据就实时打点
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以使用websocket or comet长连接 or 轮询的方式 实时推送数据 到 前端 :)
至于highcharts 怎么画 就不多说了:)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
/我也正在做，也想知道这个问题，我找到答案之后再告诉你吧/
日11:29:21 编辑
现在我还是没找到真正的解决方法，但是用了另外一个方法解决了这个问题，你的既然是股票分时图，应该还要显示交易量的吧？比如说像下图那样
如果是有交易量的就好办了，在你的交易量的数据中，把后面没有数据的地方也加上数据，x值自己计算，y 值均为 0 就行了
while(columnData.length&240){columnData.push({x:columnData.slice(-1)[0].x+(60*1000),y:0})}
columnData是交易量数据，正常来说，中国一天开市的时间是 4 小时，每小时 60 分钟，4*60=240 分钟，刚好数据也是一分钟一条，所以columnData.length应该为 240. 设置 x 值的方法你可以参考，反正 y 值是 0。而分时的价格数据不用管，最后效果如上图。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：正文 Highcharts与Highstock实例(折线图、饼图、柱状图)
Highcharts与Highstock实例(折线图、饼图、柱状图)
发布时间： & 编辑：
本文介绍下，Highcharts与Highstock结合的例子，实现折线图、饼图、柱状图的示例代码，有需要的朋友参考下。
&&& &head&
&&&&&&& &title&highcharts报表示例-.cn&/title&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&/&
&&&&&&& &script type=&text/javascript& src=&./js/jquery.min.js&&&/script&
&&&&&&& &script type=&text/javascript&&
&&&&&&&&&&& $(function () {
&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& $(document).ready(function() {
&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&& * highcharts数据图表
&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&& * @param {object} chart 图表的相关参数配置
&&&&&&&&&&&&&&&&&&&& * @param {object} credits 图表版权信息参数配置
&&&&&&&&&&&&&&&&&&&& * @param {object} lang 图表语言参数配置
&&&&&&&&&&&&&&&&&&&& * @param {object} exporting 导出配置
&&&&&&&&&&&&&&&&&&&& * @param {object} title 标题配置
&&&&&&&&&&&&&&&&&&&& * @param {object} xAxis X轴配置
&&&&&&&&&&&&&&&&&&&& * @param {object} yAxis Y轴配置
&&&&&&&&&&&&&&&&&&&& * @param {object} plotOptions 各类型图表绘制配置
&&&&&&&&&&&&&&&&&&&& * @param {object} labels 数据图表标签配置
&&&&&&&&&&&&&&&&&&&& * @param {array} series 数据源配置
&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&& chart = new Highcharts.Chart({
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * 图表配置
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} renderTo 图表加载的位置
&&&&&&&&&&&&&&&&&&&&&&&& * @param {int} width 图表的宽度
&&&&&&&&&&&&&&&&&&&&&&&& * @param {int} hight 图表的高度
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} type 图表的默认类型
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} zoomType 图表的缩放选项，有：x, y, xy
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& chart: {
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 图表加载的位置
&&&&&&&&&&&&&&&&&&&&&&&&&&& renderTo: 'container',
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 图表宽度
&&&&&&&&&&&&&&&&&&&&&&&&&&& width: 600,
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 图表高度
&&&&&&&&&&&&&&&&&&&&&&&&&&& hight: 500,
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 默认图表类型
&&&&&&&&&&&&&&&&&&&&&&&&&&& type: 'line',
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 缩放配置：x，y，xy
&&&&&&&&&&&&&&&&&&&&&&&&&&& zoomType: ''
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * 版权信息配置，不用修改直接复制
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {boolean} enabled 是否显示版权信息
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} href 版权信息所链接到的地址
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} text 版权信息所显示的文字内容
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& credits:{
&&&&&&&&&&&&&&&&&&&&&&&&&&& enabled: false,
&&&&&&&&&&&&&&&&&&&&&&&&&&& href: &/Admin&,
&&&&&&&&&&&&&&&&&&&&&&&&&&& text: 'jquery中文网'
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * 语言配置，不用修改直接复制
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} exportButtonTitle 导出按钮的标题文字
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} printButtonTitle 打印按钮的标题文字
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& lang:{
&&&&&&&&&&&&&&&&&&&&&&&&&&& exportButtonTitle:'导出PDF',
&&&&&&&&&&&&&&&&&&&&&&&&&&& printButtonTitle:'打印报表'
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * 导出配置，不用修改直接复制
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {boolean} enabled 是否允许导出
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} buttons 关于与导出和打印按钮相关的配置对象
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} filename 导出文件的文件名
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} type 默认导出文件的格式
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& exporting:{
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否允许导出
&&&&&&&&&&&&&&&&&&&&&&&&&&& enabled:true,
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 按钮配置
&&&&&&&&&&&&&&&&&&&&&&&&&&& buttons:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 导出按钮配置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& exportButton:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& menuItems: null,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& onclick: function() {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& this.exportChart();
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 打印按钮配置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& printButton:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& enabled:false
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 文件名
&&&&&&&&&&&&&&&&&&&&&&&&&&& filename: '报表',
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 导出文件默认类型
&&&&&&&&&&&&&&&&&&&&&&&&&&& type:'application/pdf'
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * 图表的标题
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& title: {
&&&&&&&&&&&&&&&&&&&&&&&&&&& text: '联合图表实例'
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * X轴配置
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {array} categories X轴坐标分类值
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} labels 坐标标签配置对象
&&&&&&&&&&&&&&&&&&&&&&&& * @param {int} tickInterval 坐标轴的步进值
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} title 坐标轴标题
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& xAxis: {
&&&&&&&&&&&&&&&&&&&&&&&&&&& // X轴分类
&&&&&&&&&&&&&&&&&&&&&&&&&&& categories: ['苹果', '桔子', '梨子', '香蕉', '李子'],
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 坐标轴的标签
&&&&&&&&&&&&&&&&&&&&&&&&&&& labels:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签位置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& align: 'center',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签格式化
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& formatter: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& return this.
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签旋转度数
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& rotation: 20,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签交错显示的行数
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& staggerLines: 1
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& // X轴的步进值，决定隔多少个显示一个
&&&&&&&&&&&&&&&&&&&&&&&&&&& tickInterval: 1,
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 坐标轴标题
&&&&&&&&&&&&&&&&&&&&&&&&&&& title: {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& text: '水果分类'
&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * y轴配置
&&&&&&&&&&&&&&&&&&&&&&&& *
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} labels 坐标标签配置对象
&&&&&&&&&&&&&&&&&&&&&&&& * @param {int} tickInterval 坐标轴的步进值
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} title 坐标轴标题
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& yAxis: {
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 坐标轴的标签
&&&&&&&&&&&&&&&&&&&&&&&&&&& labels:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签位置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& align: 'right',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签格式化
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& formatter: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& return this.value + '个';
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& // y轴的步进值，决定隔多少个显示一个
&&&&&&&&&&&&&&&&&&&&&&&&&&& tickInterval: 3,
&&&&&&&&&&&&&&&&&&&&&&&&&&& // 坐标轴标题
&&&&&&&&&&&&&&&&&&&&&&&&&&& title: {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& text: '水果个数'
&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&& * 绘图的各选项、参数配置
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} series 数列，可以配置各种不同类型图表的默认参数
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} bar 横向柱状图配置参数
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} column 纵向柱状图配置参数
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} line 线性图
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} spline 圆滑曲线图配置参数
&&&&&&&&&&&&&&&&&&&&&&&& * @param {object} pie 饼状图
&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&& plotOptions:{
&&&&&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&&&&&& * 数列，对于所有的图表都可以适用的配置参数，属于共用性质。
&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&&&&&& series: {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 鼠标样式
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& cursor: 'pointer',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据标注不可点击
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& legendItemClick: false
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当是柱状图时，柱状的宽度
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& pointWidth: 15
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&&&&&& * 横向柱状图
&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&&&&&& bar:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据点的点击事件
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(event){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('The bar was clicked, and you can add any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当值为0时，在图表中柱状体的长度设置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& minPointLength: 2,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& point:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('This point was clicked. You can and any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否在图注中显示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& showInLegend: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否堆叠，默认：null，数值：normal，百分比：percent
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //stacking: 'normal',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 调整图像顺序关系
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& zIndex: 1
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&&&&&& * 纵向柱状图
&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&&&&&& column:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据点的点击事件
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(event){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('The bar was clicked, and you can add any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当值为0时，在图表中柱状体的长度设置
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& minPointLength: 2,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& point:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('This point was clicked. You can and any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否在图注中显示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& showInLegend: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否堆叠，默认：null，数值：normal，百分比：percent
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //stacking: null,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 调整图像顺序关系
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& zIndex: 2
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&&&&&& * 线性图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&&&&&& line:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 允许线性图上的数据点进行点击
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& allowPointSelect: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据点的点击事件
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(event){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('The bar was clicked, and you can add any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& point:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('This point on the line was clicked. You can and any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否在图注中显示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& showInLegend: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 调整图像顺序关系
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& zIndex: 3
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&&&&&& * 曲线图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&&&&&& spline:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 允许线性图上的数据点进行点击
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& allowPointSelect: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据点的点击事件
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(event){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('The bar was clicked, and you can add any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& point:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('This point on the line was clicked. You can and any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否在图注中显示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& showInLegend: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 调整图像顺序关系
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& zIndex: 3
&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&& /**
&&&&&&&&&&&&&&&&&&&&&&&&&&&& * 饼状图
&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
&&&&&&&&&&&&&&&&&&&&&&&&&&& pie:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否允许扇区点击
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& allowPointSelect: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 点击后，滑开的距离
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& slicedOffset: 5,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 饼图的中心坐标
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& center: [100, 80],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 饼图的大小
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& size: 100,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据标签
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& dataLabels: {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否允许标签
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& enabled: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 标签与图像元素之间的间距
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& distance: 10
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 数据点的点击事件
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(event){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('The bar was clicked, and you can add any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 是否忽略隐藏的项
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ignoreHiddenPoint: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& point:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& events:{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& click: function(){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //alert('This point on the line was clicked. You can and any other functions.');
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&nbs您可能感兴趣的文章：highstock V2.19 新属性介绍
ordinal ：In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.
以上是官方给出的解释，大概说的什么意思呢，用我自己的话理解就是 “在X轴上所有的点都是按时间或者距离等比分配的，这就意味着没有出现的点或者后来延迟加进来的点不会占用掉x轴上的位置和空间”，接下来我们就通过例子和demo讲解。
之前我写过一篇文章，里面提到了这个问题，我们重新回顾一遍，在分时图的开发中，例如我们需要显示的是 早上 8：00到晚上20：00的数据，X轴每隔两小时显示一个label，若当前时间为9点，那么我们需要向服务端拿到8点至15点的数据，那么问题来了，我们会发现图表展示出来整个x轴就是8点到15点，而剩余15点到20点的x轴label并没有占得空间和位置，如下图所示：
一直在用highchart在做图表，最近一段时间突然接到一活，需要用 highstock 帮客户完成一个股票K线图和分时图。虽然用法和api上与 highchart 没什么区别，但还是研究一番做出了对应的DEMO，于是抽空与大家分享下。
预期想要达成的效果图12472人阅读
highcharts（3）
web前端（6）
好久没写博客了，这次来个质量点的。
K线图，相信每个股民都不陌生，如何用SVG画好一个K线图是一个难题。
我选择用highstock做为画图组件，适当的修改了一下源码，参考了数个财经网站的案例，完成了一个不太成熟的K线图，欢迎大家批评指正。
上图就是整个K线图的样子，图的上半部分是K线图和5日均线，10日均线，30日均线，下半部分是成交量，用柱状图显示，tooltips显示了用户选择点的股票指标，所有颜色符合红涨绿跌的原则。
实现的功能主要有：
1.根据用户选择的时间区间，显示最高价和最低价。
2.点击最高价或最低价的flags会显示出相应的时间。
3.动态改变X轴时间显示格式（%Y&&&&&& %Y-%m&&&&&&& %m-%d），防止样式重叠在一起。
4. 动态改变Y轴的最大值最小值，防止K线图画出去。
5.根据当前点的开盘价和收盘价改变柱状图的颜色。
6.本地化一些常量，本地化日期格式。
7.根据鼠标指向的当前点的位置。动态改变tooltip的位置
下面附上源码
//highstock K线图
var highStockChart = function(divID,result,crrentData){
var $reporting = $(&#report&);
var firstTouch =
//开盘价^最高价^最低价^收盘价^成交量^成交额^涨跌幅^换手率^五日均线^十日均线^20日均线^30日均线^昨日收盘价 ^当前点离左边的相对距离
open,high,low,close,y,zde,zdf,hsl,MA5,MA10,MA20,MA30,zs,relativeW
//定义数组
var ohlcArray = [],volumeArray = [],MA5Array = [],MA10Array=[],MA20Array=[],MA30Array=[],zdfArray=[],zdeArray=[],hslArray=[],data=[],dailyData = [],data =[];
* 这个方法用来控制K线上的flags的显示情况，当afterSetExtremes时触发该方法,通过flags显示当前时间区间最高价和最低价
当前k线图上最小的时间点
当前k线图上最大的时间点
当前的highstock对象
var showTips =
function (minTime,maxTime,chart){
// console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M',minTime));
// console.log( Highcharts.dateFormat('%Y-%m-%d %H:%M',maxTime));
chart.showLoading();
//定义当前时间区间中最低价的最小值，最高价的最大值 以及对应的时间
var lowestPrice,highestPrice,array=[],highestArray=[],lowestArray=[],highestTime,lowestTime,flagsMaxData_1=[],flagsMaxData_2=[],flagsMinData_1,flagsMinData_2;
var chartData = chart.series[0].
for(var i=0;i&chartData.length-1;i++){
if(chartData[i].x&minTime && chartData[i].x&=maxTime){
array.push([
chartData[i].x,
chartData[i].high, //最高价
chartData[i].low //最低价
for(var i=0;i&ohlcArray.length-1;i++){
if(ohlcArray[i][0]&=minTime && ohlcArray[i][0]&=maxTime){
array.push([
ohlcArray[i][0],
ohlcArray[i][2], //最高价
ohlcArray[i][3] //最低价
if(!array.length&0){
highestArray = array.sort(function(x, y){
return y[1] - x[1];})[0];// 根据最高价降序排列
highestTime =highestArray[0];
highestPrice =highestArray[1].toFixed(2);
lowestArray = array.sort(function(x, y){
return x[2] - y[2];})[0]; //根据最低价升序排列
lowestTime =lowestArray[0];
lowestPrice =lowestArray[2].toFixed(2);
var formatDate1 = Highcharts.dateFormat('%Y-%m-%d',highestTime)
var formatDate2 = Highcharts.dateFormat('%Y-%m-%d',lowestTime)
flagsMaxData_1 = [
x : highestTime,
title : highestPrice+&(&+formatDate1+&)&
flagsMaxData_2 = [
x : highestTime,
title : highestPrice
flagsMinData_1 = [
x : lowestTime,
title : lowestPrice+&(&+formatDate2+&)&
flagsMinData_2 = [
x : lowestTime,
title : lowestPrice
parseFloat(flagsMinData_2[0].title) - parseFloat(flagsMinData_2[0].title)*0.05;
parseFloat(flagsMaxData_2[0].title)+parseFloat(flagsMaxData_2[0].title)*0.05;
var tickInterval = (( max-min)/5).toFixed(1)*1;
var oneMonth = *30;
var oneYear = *365;
var tickIntervalTime,dataFormat='%Y-%m';
if(maxTime-minTime&oneYear*2){
tickIntervalTime = oneYear*2
dataFormat = '%Y';
}else if(maxTime-minTime&oneYear){
tickIntervalTime = oneMonth*6
}else if(maxTime-minTime&oneMonth*6){
tickIntervalTime = oneMonth*3
tickIntervalTime = oneMonth
dataFormat = '%m-%d'
//Y轴坐标自适应
chart.yAxis[0].update({
min : min,
max : max,
tickInterval: tickInterval
//X轴坐标自适应
chart.xAxis[0].update({
min : minTime,
max : maxTime,
tickInterval: tickIntervalTime,
y:-78,//调节y偏移
formatter: function(e) {
return Highcharts.dateFormat(dataFormat, this.value);
//动态update flags(最高价)
chart.series[5].update({
data : flagsMaxData_2,
click:function(){
chart.series[5].update({
data : flagsMaxData_1,
width : 100
chart.series[6].update({
data : flagsMinData_1,
width : 100
mouseOut:function(){
chart.series[5].update({
data :flagsMaxData_2,
width : 25
chart.series[6].update({
data :flagsMinData_2,
width : 25
//动态update flags(最低价)
chart.series[6].update({
data : flagsMinData_2,
click:function(){
chart.series[6].update({
data : flagsMinData_1,
width : 100
chart.series[5].update({
data : flagsMaxData_1,
width : 100
mouseOut:function(){
chart.series[6].update({
data :flagsMinData_2,
width : 25
chart.series[5].update({
data :flagsMaxData_2,
width : 25
chart.hideLoading();
//修改colum条的颜色（重写了源码方法）
var originalDrawPoints = Highcharts.seriesTypes.column.prototype.drawP
Highcharts.seriesTypes.column.prototype.drawPoints = function () {
= Highcharts.merge,
series = this,
= this.chart,
points = series.points,
while (i--) {
var candlePoint = chart.series[0].points[i];
if(candlePoint.open != undefined && candlePoint.close !=
undefined){
//如果是K线图 改变矩形条颜色，否则不变
var color = (candlePoint.open & candlePoint.close) ? '#DD2200' : '#33AA11';
var seriesPointAttr = merge(series.pointAttr);
seriesPointAttr[''].fill =
seriesPointAttr.hover.fill = Highcharts.Color(color).brighten(0.3).get();
seriesPointAttr.select.fill =
var seriesPointAttr = merge(series.pointAttr);
points[i].pointAttr = seriesPointA
originalDrawPoints.call(this);
//常量本地化
Highcharts.setOptions({
global : {
useUTC : false
rangeSelectorFrom:&日期:&,
rangeSelectorTo:&至&,
rangeSelectorZoom:&范围&,
loading:'加载中...',
/*decimalPoint:'.',
downloadPNG:'下载PNG图片',
downloadJPEG:'下载JPG图片',
downloadPDF:'下载PDF文件',
exportButtonTitle:'导出...',
printButtonTitle:'打印图表',
resetZoom:'还原图表',
resetZoomTitle:'还原图表为1:1大小',
thousandsSep:',',*/
shortMonths:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
weekdays:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
//格式化数据，准备绘图
dailyData = result.vl.split(&~&);
for(i=0;i&dailyData.length-1;i++){
data[i] = dailyData[i].split(&^&);
//把当前最新K线数据加载进来
var length = data.length-1;
var time = parseFloat(data[length][0]);
var crrentTime = crrentData[0];
// if(!(isNaN(crrentData[1]) || isNaN(crrentData[2]) || isNaN(crrentData[3]) || isNaN(crrentData[4]))){
if(crrentData[1]!=0 || crrentData[2]!=0 || crrentData[3]!=0 || crrentData[4]!=0){
if(time & crrentTime){
data.push(crrentData);
}else if(time == crrentTime){
data[length] = crrentD
for (i = 0; i & data. i++) {
// console.log( Highcharts.dateFormat('%A ,%Y-%m-%d %H:%M',parseInt(data[i][0])));
ohlcArray.push([
parseInt(data[i][0]), // the date
parseFloat(data[i][1]), // open
parseFloat(data[i][3]), // high
parseFloat(data[i][4]), // low
parseFloat(data[i][2]) // close
MA5Array.push([
parseInt(data[i][0]), // the date
parseFloat(data[i][11])
MA10Array.push([
parseInt(data[i][0]),
parseFloat(data[i][12]),
MA20Array.push([
parseInt(data[i][0]),
parseFloat(data[i][13]),
MA30Array.push([
parseInt(data[i][0]),
parseFloat(data[i][14])
volumeArray.push([
parseInt(data[i][0]), // the date
parseInt(data[i][5]) // 成交量
//开始绘图
return new Highcharts.StockChart( {
renderTo : divID,
margin: [30, 30,30, 30],
plotBorderColor: '#3C94C4',
plotBorderWidth: 0.3,
load:function(){
var length = ohlcArray.length-1;
showTips(ohlcArray[0][0],ohlcArray[length][0],this);
loading: {
labelStyle: {
position: 'relative',
top: '10em',
zindex:1000
enabled:false
rangeSelector: {
selected: 1,
buttons: [{
type: 'month',
text: '1月'
type: 'month',
text: '2月'
type: 'all',
text: 'All'
enabled:false,
inputDateFormat: '%Y-%m-%d'
//设置右上角的日期格式
plotOptions: {
//修改蜡烛颜色
candlestick: {
color: '#33AA11',
upColor: '#DD2200',
lineColor: '#33AA11',
upLineColor: '#DD2200',
enabled:false,
//去掉曲线和蜡烛上的hover事件
enabled: false
enabled: false
//格式化悬浮框
tooltip: {
formatter: function() {
if(this.y == undefined){
for(var i =0;i&data.i++){
if(this.x == data[i][0]){
zdf = parseFloat(data[i][7]).toFixed(2);
zde = parseFloat(data[i][8]).toFixed(2);
hsl = parseFloat(data[i][9]).toFixed(2);
zs = parseFloat(data[i][10]).toFixed(2);
open = this.points[0].point.open.toFixed(2);
high = this.points[0].point.high.toFixed(2);
low = this.points[0].point.low.toFixed(2);
close = this.points[0].point.close.toFixed(2);
y = (this.points[1].point.y*0.0001).toFixed(2);
MA5 =this.points[2].y.toFixed(2);
MA10 =this.points[3].y.toFixed(2);
MA30 =this.points[4].y.toFixed(2);
relativeWidth = this.points[0].point.shapeArgs.x;
var stockName = this.points[0].series.
var tip= '&b&'+ Highcharts.dateFormat('%Y-%m-%d
%A', this.x) +'&/b&&br/&';
tip +=stockName+&&br/&&;
if(open&zs){
tip += '开盘价：&span style=&color: #DD2200;&&'+open+' &/span&&br/&';
tip += '开盘价：&span style=&color: #33AA11;&&'+open+' &/span&&br/&';
if(high&zs){
tip += '最高价：&span style=&color: #DD2200;&&'+high+' &/span&&br/&';
tip += '最高价：&span style=&color: #33AA11;&&'+high+' &/span&&br/&';
if(low&zs){
tip += '最低价：&span style=&color: #DD2200;&&'+low+' &/span&&br/&';
tip += '最低价：&span style=&color: #33AA11;&&'+low+' &/span&&br/&';
if(close&zs){
tip += '收盘价：&span style=&color: #DD2200;&&'+close+' &/span&&br/&';
tip += '收盘价：&span style=&color: #33AA11;&&'+close+' &/span&&br/&';
if(zde&0){
tip += '涨跌额：&span style=&color: #DD2200;&&'+zde+' &/span&&br/&';
tip += '涨跌额：&span style=&color: #33AA11;&&'+zde+' &/span&&br/&';
if(zdf&0){
tip += '涨跌幅：&span style=&color: #DD2200;&&'+zdf+' &/span&&br/&';
tip += '涨跌幅：&span style=&color: #33AA11;&&'+zdf+' &/span&&br/&';
if(y&10000){
tip += &成交量：&+(y*0.0001).toFixed(2)+&(亿股)&br/&&;
tip += &成交量：&+y+&(万股)&br/&&;
/* tip += &换手率：&+hsl+&&br/&&;*/
$reporting.html(
&span style=&font-weight:bold&&'+stockName+'&/span&'
&span&开盘:&/span&'+ open
&span&收盘:&/span&'+close
&span&最高:&/span&'+ high
&span&最低:&/span&'+ low
&span style=&padding-left:25&& &/span&'+ Highcharts.dateFormat('%Y-%m-%d',this.x)
+' &br/&&b style=&color:#1padding-left:25px&&MA5&/b& '+ MA5
&b style=&color: #8bbc21;padding-left:150px&&MA10 &/b& '+ MA10
&b style=&color:#910000;padding-left:150px&&MA30&/b& '+ MA30
//crosshairs: [true, true]//双线
crosshairs: {
dashStyle: 'dash'
borderColor: 'white',
positioner: function () { //设置tips显示的相对位置
var halfWidth = this.chart.chartWidth/2;//chart宽度
var width = this.chart.chartWidth-155;
var height = this.chart.chartHeight/5-8;//chart高度
if(relativeWidth&halfWidth){
return { x: width, y:height };
return { x: 30, y: height };
shadow: false
enabled:false
exporting: {
enabled: false
//设置导出按钮不可用
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7,
//enabled: false,
liveRedraw: false //设置scrollbar在移动过程中，chart不会重绘
navigator: {
adaptToUpdatedData: false,
formatter: function(e) {
return Highcharts.dateFormat('%m-%d', this.value);
handles: {
backgroundColor: '#;,
// borderColor: '#268FC9'
margin:-10
type: 'datetime',
tickLength: 0,//X轴下标长度
// minRange: 3600 * , // one month
afterSetExtremes: function(e) {
var minTime = Highcharts.dateFormat(&%Y-%m-%d&, e.min);
var maxTime = Highcharts.dateFormat(&%Y-%m-%d&, e.max);
var chart = this.
showTips(e.min,e.max,chart);
enable:false
height: '70%',
lineWidth:1,//Y轴边缘线条粗细
gridLineColor: '#;,
gridLineWidth:0.1,
// gridLineDashStyle: 'longdash',
opposite:true
enable:false
top: '75%',
height: '25%',
gridLineColor: '#;,
gridLineWidth:0.1,
lineWidth: 1,
type: 'candlestick',
id:&candlestick&,
name: ame,
data: ohlcArray,
dataGrouping: {
enabled: false
type: 'column',//2
name: '成交量',
data: volumeArray,
dataGrouping: {
enabled: false
type: 'spline',
name: 'MA5',
color:'#1aadce',
data: MA5Array,
lineWidth:1,
dataGrouping: {
enabled: false
type: 'spline',
name: 'MA10',
data: MA10Array,
color:'#8bbc21',
threshold: null,
lineWidth:1,
dataGrouping: {
enabled: false
type: 'spline',
name: 'MA30',
data: MA30Array,
color:'#;,
threshold: null,
lineWidth:1,
dataGrouping: {
enabled: false
type : 'flags',
cursor:'pointer',
fontSize: '11px',
fontWeight: 'normal',
textAlign: 'center'
lineWidth:0.5,
onSeries : 'candlestick',
width : 25,
shape: 'squarepin'
type : 'flags',
cursor:'pointer',
fontSize: '11px',
fontWeight: 'normal',
textAlign: 'center'
lineWidth:0.5,
onSeries : 'candlestick',
width : 25,
shape: 'squarepin'
}html页面调用的话需要这样写
new highStockChart('container',retTrade,crrentData);
&div id=&container& style=&height: 400width: 545px&&其中container是highstock的renderID , retTrade是需要组装的数组，crrentData是当天需要实时更新的数组（也就是图上的最后一个点，需要过一段时间更新一遍，因为当天的K线指标一直在变）
retTrade的数据格式如下：
{日期^1开盘价^2收盘价^3最高价^4最低价^5成交量^6成交额^7涨跌幅^8涨跌额^9换手率^10昨日收盘价^11MA5^12MA10^13MA20^14MA30^15MA60}
crrentData的数据格式如下：
{日期^1开盘价^2收盘价^3最高价^4最低价^5成交量^MA5^MA10^MA20^MA30}
当然您也可以自定义，只需要把js中的相应数组下标调整好就可以了。
最后，别忘了引入highstock.js和较高版本的JQUERY，good luck！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：81289次
积分：1181
积分：1181
排名：千里之外
原创：34篇
评论：36条
(5)(1)(1)(1)(4)(7)(1)(1)(3)(3)(3)(1)(3)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'