Highcharts作为最牛逼的前端图形库当之不愧，不仅使用简单并且非盈利项目可以免费使用，复制粘贴几下就可以生成绚丽的图表，方便各位给Leader或者外行人员装逼专用。虽然说目前百度的Echarts也非常火爆，荣获github上国内加星最多的项目，但是个人始终觉得还是Highcharts更胜一筹，不过在大数据特征展示上面我还是推荐Echarts。

个人接触Highcharts已经有好几年了，但是从来都没怎么深入研究过，不过话又说回来，Highcharts这种傻瓜式的前端库也没有高深的使用技巧，但是对于不熟悉的新手可以从如下的总结中进步提升。

初级配置

初级配置就是把Highcharts给跑起来，复制几段代码就ok：

• HTML页面中包含jquery.js, highcharts.js, exporting.js；
• 打开highcharts demo中的任意样式，然后选择「view options」就可以看到此demo的实现代码，复制到你的HTML页面中；
• 在HTML页面中新建一个div层，id为「container」；
• 刷新浏览器看效果。

以上就是初级配置的详细过程；

主题修改

在demo页面中其实有很多的主题样式「dark, gray, sand等」，使用的时候也很简单:

• 下载主题文件中对应颜色的js文件到你本地;
• 在你的HTML页面中包含对应的JS文件；
• 完工

线条修改

颜色修改

在具体的项目中，当你需要修改线条的颜色时，你可以通过在demo 实例代码中添加如下代码：

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],
        color: 'blue'
    }]

即在数据的下面添加了color属性，color的值可以取颜色对应的英文名字，例如「red, purple, green」等;

线条形状

可能你需要在一幅图形中显示相同颜色的两条曲线，这样你可以通过显示虚线或者实线来实现，显示代码如下：

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],
        dashStyle: 'dash',
        color: 'blue'
    }]

添加dashStyle属性即可修改线条的形状

PHP代码结合

很多时候，highcharts需要的数据其实是由后端脚本生成的，比如PHP，这里可以通过PHP的json_encode实现快速赋值,当然输入是一个数组；

series: [{
        name: 'original',
        data: <?php echo json_encode(getData('PV'));?>,
        dashStyle: 'dash',
        color: 'orange',
    }]