相信很多童鞋都在用Highcharts做图表，使用时当然就会产生各种各样的需求，今天遇到一个问题，搞了一上午才搞定：在服务端拼装好options的json串传到前段，但是有个问题，JSONObject方法是防止代码注入的，所以纯js代码都会被加上“”，这样就无法直接执行了。
同时，我所用的highchart时间轴使用pointStart:Date.UTC(2012,10,10)，这样的js代码设置的，这就需要我在前段利用js设置pointStart值，试了好久，源码看了也木有用。。。最后还是用firebug调试，看了下options变量的组成结构才搞定：
options.plotOptions.series.pointStart = Date.UTC( now.getFullYear(), now.getMonth(), now.getDay() );
使用上面的语法设置就可以啦，以下是我的全部代码示例（可拷贝出去直接运行）：
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
     var now = new Date()
     var options = {
         "plotOptions":{
         "series":{
         //"pointStart":Date.UTC( 2000, 1, 2 ),
         "pointInterval":3600*1000*24},
         "line":{"enableMouseTracking":true,"dataLabels":{"enabled":true}}},"title":{"text":"关键词趋势分析"},"yAxis":{"title":{"text":"数量"}},"subtitle":{"text":""},"chart":{"renderTo":"container","type":"line"},"xAxis":{"labels":{"formatter":function(){ return Highcharts.dateFormat("%m-%d", this.value); }},"type":"datetime"},"tooltip":{"xDateFormat":"%Y-%m-%d %A","shared":true,"enabled":true,"crosshairs":true},
        
            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]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        
        };
        //alert(now.getFullYear());
        //options.pointInterval = 3600*1000*24;
        //alert(options.plotOptions.pointStart);
       options.plotOptions.series.pointStart = Date.UTC( now.getFullYear(), now.getMonth(), now.getDay() );//就是这一部啦~
        //alert(options.plotOptions.series.pointStart);
        Highcharts.setOptions(options);
       chart = new Highcharts.Chart(options);
    });
    
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 
</body>
</html>

Highcharts中如何外部修改pointStart的更多相关文章

  1. 如何在Android应用中引入外部网页

    在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...

  2. 向linux内核中添加外部中断驱动模块

    本文主要介绍外部中断驱动模块的编写,包括:1.linux模块的框架及混杂设备的注册.卸载.操作函数集.2.中断的申请及释放.3.等待队列的使用.4.工作队列的使用.5.定时器的使用.6.向linux内 ...

  3. Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数

    Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4  为外部参数设置默认值 开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift1 ...

  4. [转帖]在RDLC中使用外部图片

    原文链接:http://blog.csdn.net/rock870210/article/details/4559962 在RDLC中使用外部图片 2009-09-16 19:08 3416人阅读 评 ...

  5. [译]在Asp.Net Core 中使用外部登陆（google、微博...）

    原文出自Rui Figueiredo的博文<External Login Providers in ASP.NET Core> 摘要:本文主要介绍了使用外部登陆提供程序登陆的流程,以及身份 ...

  6. 使用PreparedStatement向数据表中插入、修改、删除、获取Blob类型的数据

    使用PreparedStatement向数据表中插入.修改.删除.获取Blob类型的数据 2014-09-07 20:17 Blob介绍 BLOB类型的字段用于存储二进制数据 MySQL中,BLOB是 ...

  7. 【译】在Asp.Net Core 中使用外部登陆（google、微博...）

    原文出自Rui Figueiredo的博文<External Login Providers in ASP.NET Core> (本文很长) 摘要:本文主要介绍了使用外部登陆提供程序登陆的 ...

  8. 如何在cmd命令行中查看、修改、删除与添加环境变量，语法格式例子：set path；echo %APPDATA%

    如何在cmd命令行中查看.修改.删除与添加环境变量 首先明确一点: 所有的在cmd命令行下对环境变量的修改只对当前窗口有效,不是永久性的修改.也就是说当关闭此cmd命令行窗口后,将不再起作用.永久性修 ...

  9. php在linux中执行外部命令

    目录:一.PHP中调用外部命令介绍二.关于安全问题三.关于超时问题四.关于PHP运行linux环境中命令出现的问题 一.PHP中调用外部命令介绍在PHP中调用外部命令,可以用,1>调用专门函数. ...

随机推荐

  1. Gimp教程:多图层多渐变的文字效果

    这个教程是我在国外的视频网站上学的,制作这个教程也很久了,今天在网盘翻看到这个截图版本,正好整理到博客,方便管理.记得当时花了一下午的时间来边做边截图修改制作,个人觉得这个教程还是很好的,原作者很有创 ...

  2. Canvas入门（3）:图像处理和渲染文本

    资源:http://www.ido321.com/997.html 一.图像处理(非特别说明,全部结果均来自最新版Google) 在HTML 5中,不仅能够使用Canvas API绘制图形,也能够用于 ...

  3. [译]Java 设计模式之备忘录

    (文章翻译来自Java Design Pattern: Memento) memento是一个保存另外一个对象内部状态拷贝的对象.这样以后就可以将该对象恢复到原先保存的状态. 在将来时空旅行将成为显示 ...

  4. SSMS2008插件开发(3)--部署调试SSMS2008插件

    原文:SSMS2008插件开发(3)--部署调试SSMS2008插件 上一次说到VS2008中的插件开发,最终结果插件是部署在VS2008中,现在我们将插件部署到SSMS2008(Microsoft ...

  5. 九度OJ 1035:找出直系亲属(二叉树)

    题目1035:找出直系亲属 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1309 解决:521 题目描述: 如果A,B是C的父母亲,则A,B是C的parent,C是A,B的child,如 ...

  6. hibernate在持久对象的生命周期（三州：自由状态，持久状态，自由状态 之间的转换）

    三种状态的基本概念: 1.  临时身份(Transient):也被称为自由状态,它只存在于内存中,并且在数据库中没有相应的数据. 使用new创建的对象,久化,没有处于Session中,处于此状态的对象 ...

  7. Oracle Database Instant Client 11g 32位和64位 安装包发布

    Oracle Database Instant Client 11g 32位和64 Oracle Database Instant Client 11g 11.2.0.3.0 Instant Clie ...

  8. jquery表格datagrid单元格显示图片及分页使用

    要想达到自定义显示表格框的目的比如显示图片,超链接,按钮的形式,只需要给列添加formatter属性即可,比如显示图片: columns: [[                             ...

  9. SQLServer数据库误删数据找回

    记一次SQLServer数据库误删数据找回 昨天 同事在本机清理数据库表时,连接到了生产机,误删了二十几张表,幸好是晚上加班的时候删除的,生产机上当时是一天一备份,还原备份是最后的策略,最关键的还是要 ...

  10. HBase 手动 flush 机制梳理

    对应 HBase 版本0.94.1,对照了开源的版本和工作使用的某发行版 问题:在 HBase shell 里面输入 flush 'table_or_region_name'之后,发生了什么?具体的实 ...