highcharts 为我们提供了丰富的扩展接口，今天就给大家讲讲在highcharts中指定的位置画我们想要的按钮、图片、图形、文字等。
关于highchart 扩展方法我们先来看看highchart自身提供的画图扩展方法 Renderer，只有了解了如何画图，我们才能在图表上绘制想要的图形，方法有如下几个，不清楚的可以上官网查看。
arc() 用来画弧线图
参数 (Number centerX, Number centerY, Number outerRadius, Number innerRadius, Number start, Number end)
centerX和centerY分别对应x，y的坐标，outerRadius 外弧的半径，innerRadius内弧的半径，start和end 通常为 -Math.PI/2，-Math.PI，或者0 表示弧的方向 。
circle() 用来画圆形图
参数(Number centerX, Number centerY, Number radius) centerX 表示x轴坐标，centerY表示y轴坐标，radius表示半径
g() 用来构建一个群组将元素包裹，参数只有一个 传入 名称即可
渲染后会默认变成 “highcharts-“+ name
image() 用来嵌入一张图片
参数(String source, Number x, Number y, Number width, Number height) source 图片路径，x，y为坐标，width和height为图片的宽和高
path() 用来画路径图
这个方法参数稍微有点复杂，需要参考svg的一些路径命令 ，
rect() 用来画区域方形图
参数(Number x, Number y, Number width, Number height, Number cornerRadius) x，y分别为x和y轴坐标，width和height为所画区域的宽高，cornerRadius表示图形的圆角
text() 用来画文本字符参数 (String str, Number x, Number y)x，y分别为x和y轴坐标，str表示需要绘制的字符串文本highchart自定义事件
&Fork自highchart动态增加Point。
还没有人Fork此代码哦，赶紧来吧！
Ta的最近动态
Fork了代码
Fork了代码
Fork了代码
Ta发布的其他代码(173)
&&0评/0Fork，更新于2年前。
&&0评/0Fork，更新于2年前。
&&0评/0Fork，更新于2年前。
&&0评/0Fork，更新于2年前。
&&0评/0Fork，更新于2年前。基于mvc的Razor语法，实现Highcharts图表插件的数据绑定
1.引用几个库文件
&script src="~/Scripts/jquery-1.8.2.min.js"&&/script&
&script src="~/Scripts/Highcharts/highcharts.js"&&/script&
&script src="~/Scripts/Highcharts/exporting.js"&&/script&
&script src="~/Scripts/Highcharts/gray.js"&&/script&
2.Html新建一个div，并取个ID
&div id="container" style="min-width: 310 height: 400 margin: 0 auto"&&/div&
3.编写js（这一段可以去官网复制，然后略作修改就行）
$(function () {
$('#container').highcharts({
type: 'column'
text: '标题'
subtitle: {
text: 'Source: /sunshine-wy/'
categories: @ViewBag.dataBuyTime
text: 'Number'
tooltip: {
headerFormat: '&span style="font-size:10px"&{point.key}&/span&&table&',
pointFormat: '&tr&&td style="color:{series.color};padding:0"&{series.name}: &/td&' +
'&td style="padding:0"&&b&{point.y:.1f} 个&/b&&/td&&/tr&',
footerFormat: '&/table&',
shared: true,
useHTML: true
plotOptions: {
pointPadding: 0.2,
borderWidth: 0
series: [{
name: '购买的苹果',
data: @ViewBag.dataBuySum
name: '没有坏掉的数量',
data: @ViewBag.dataTrueSum
4.后台得到得到数据源并返回
public ActionResult Index()
var strBuySum = "";
foreach (var item in _rdb.GetResumeDeliverySum().ToList())
strBuySum += @item.BuySum + ",";
strBuySum = strBuySum.Substring(0, strBuySum.Length - 1);
strBuySum = string.Concat('[', strBuySum, ']');
ViewBag.dataBuySum = strBuyS
return View();
最后一步是最关键的一步，主要是对返回数据的处理。这里也可以在前台使用ajax，但是推荐在后台一并处理掉，不用加载界面的时候又跑过来请求一遍。
说说感想吧！这个东西不紧不慢做着有一个星期了，先是发现了插件找到了官网然后看API文档，copy代码到编译器中测试看了看效果，基本上一样， 样式不喜欢有翻了翻文档改了改引用文件，然后就好看多了。
之前有同事用过这个，看了他的博客才翻到了这个插件，基本上说明比较详细，所以上手很简单。但是往下考虑到自己的需求就不够用了，博客上没详细说明怎么动态加载数据，于是有去百度、读别人的博客，然而还是没出来，数据格式一时间转不过来卡住了。这大概是最痛苦的了！
当然，上帝为你关上一扇门的时候也会为你打开一扇窗，就去了博客园提问，嗯，各路大牛纷纷支招，（技术有点菜有的大牛给的思路难以实现），最后还是收到一个比较适合我理解消化的答案，一举解决了数据格式的问题，然后后面的按着这个思路就都出来了！很棒不是吗?
分享知识的过程无疑是喜悦的，一路走来，有些人会带着你，同事也好，园友也好，这种氛围可能会潜移默化影响吧，坚持下去，等若干年后，你也许也会如现在的他们这般传道授业解惑，那时你会看到他们身上有当年的自己的青涩的影子，一定是一种莫名的触动！
--------------------------------------------------------------------------------------------------------------
附上一张样例图给大家看一看：
阅读(...) 评论() &highcharts 自定义鼠标hover显示内容 - 推酷
highcharts 自定义鼠标hover显示内容
最近做项目要做图标，尝试用了一下highcharts，太强大了。
默认的hightcharts 当鼠标放上去时现实x轴坐标和y轴坐标值，如果需要自定义需要修改&tooltip里面的pointFormat
tooltip 可以放在外层json中，现实全局的，也可以放在单独的series中针对每一组data进行不同的格式化。
1、放在全局
('#container').highcharts({
tooltip: {
pointFormat = &温度:{point.y}℃&
series: [{
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]
2、单独series
$('#container').highcharts({
series: [{
name: 'Temperature',
color: '#89A54E',
type: 'spline',
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],
tooltip: {
pointFormat = &温度:{point.y}℃&
其中point为各个点的对象，可以获取每个点相应的值。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}