首页 技术 正文

HighCharts使用总结

技术 2022年11月14日
0 收藏 319 点赞 3,021 浏览 9512 个字

1、常用属性

chart：
type:areaspline(线面图)、arearange（区间图）
zoomType: 缩放类型（沿着’xy’轴缩放）
alignTicks:设置坐标轴刻度对齐。 当有多个坐标轴时，设置坐标轴刻度的对其方式（通过自动计算还是不需要计算）。

color: ‘rgba(68, 170, 213, 0.1)’ 颜色的透明色设置

style:CSS样式
设置文字颜色、字体、字号，但是字体的对齐则使用algin、x和y元素。比如： { “color”: “#333333”, “fontSize”: “18px” }

Axis(x轴和y轴)：
type：轴类型 （datetime，日期时间）
gridLineWidth：网格线的粗细
alternateGridColor：网格之间的过度填充色
plotBands：区间带（比如1.5至3.5之间是什么颜色）
tickInterval: 标记间隔（7 * 24 * 3600 * 1000, // 一周）
minRange:最小区间 （14 * 24 * 3600000 // 14天）
opposite:是否对立面显示坐标轴，比如图表双轴的时候

plotOptions：用来设置所有数据序列的公共对象。
series.cursor：鼠标类型
series.point.events.：鼠标点事件
spline.pointInterval:3600000 点位间隔（毫秒，一小时）
area：设置图形区域的渐变颜色
pie.size:圆形图和环形图相对于图表区的大小，做小的“圆形图和环形图”的时候可以用到。
marker:数据的标记点

tooltip：提示窗  （需要开启 enableMouseTracking: true）
valueSuffix：单位后缀
shared: true （多数据序列是否共享提示窗）
headerFormat: 提示框中标题行的HTML代码，默认值(<span style=”font-size: 10px”>{point.key}</span><br/>)。变量被花括号包起来。可用的变量有point.key, series.name, series.color和其它从点对象point和series 对象中的成员。
pointFormat:提示框中该点的HTML代码，默认值 <span style=”color:{series.color}”>\u25CF</span> {series.name}: <b>{point.y}</b><br/>.
footerFormat: 字符串形式定义提示框中的注脚格式。
useHTML:是否用HTML取代svg展示ToolTip标签。

labels小数点位数：

labels: {
format: ‘{y:.2f} %'( 没有Y值)   {value:.4f} %（有Y值）
}

实例：tooltip: {
borderColor: ‘#0000AA’,
//headerFormat: ‘<span style=”font-size:10px”>{point.key}</span><table>’,
//pointFormat: ‘<tr><td style=”padding:0″>{series.name}: </td>’ +
//'<td style=”padding:0″><b>{point.y:.1f} kWh</b></td></tr>’,
//footerFormat: ‘</table>’,
//useHTML: true,
valueDecimals:2,
shared: true,
valueSuffix: ‘kWh’
},

series：数据序列
dashStyle: ‘shortdot’ （虚线）
marker：数据标记点

legend:图例
layout：垂直图例还是水平图例
borderWidth：边框线
backgroundColor：背景颜色
align：水平位置
verticalAlign：垂直位置

设置标题不同的颜色样式：

var title_style = “<span style=’color:#ff0′>Monthly</span> <span style=’color:red’> Average Temperature </span>”;

title: {
text: title_style,
x: -20, //center
useHTML:true,
},

2、HightChart

highchart脱离jquery独立使用<script src=”http://code.highcharts.com/adapters/standalone-framework.js”></script><script src=”http://code.highcharts.com/highcharts.js”></script><script src=”http://code.highcharts.com/modules/exporting.js”></script>var chart = new Highcharts.Chart({chart: {renderTo: ‘container’}, xAxis: {categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’,’Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]}, series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]}); 

3、HighStock
上下多坐标轴： [{labels: {align: ‘right’,
x: -3
},
title: {
text: ‘温度(℃)’
},
height: ‘30%’,
lineWidth: 2
}, {
labels: {
align: ‘right’,
x: -3
},
title: {
text: ‘湿度（%）’
},
top: ‘35%’,
height: ‘30%’,
offset: 0,
lineWidth: 2
}, {
labels: {
align: ‘right’,
x: -3
},
title: {
text: ‘照度(Lux)’
},
top: ‘70%’,
height: ‘30%’,
offset: 0,
lineWidth: 2
}]

4、Highmap
实例地址：http://jsfiddle.net/tfxudL9z/3/
做世界地图等，可以使用内置的地图或GeoJSON，而自定义地图分为以下几个步骤。
（1）制作svg文件，可以使用“SVGDeveloper”。
（2）http://www.highcharts.com/studies/map-from-svg.htm#http://www.highcharts.com/maps/maps/test.svg 通过这个网址，将 svg文件转化为 highmap支持的json文件。
（3）用Highmap载入json文件，显示地图。

5、Treemap
数据节点父子关系，可以设置向下钻取也可以不设置。
allowDrillToNode：是否向下钻取

虽然还有其它很多图表插件，比如：echarts、fusioncharts、kcharts等。 但是，还是感觉Highcharts的渲染效果比较好，看起来漂亮。  有一点不好，就是灵活性大，官方的参考实例比较少，文档看英文有点费劲。

6、JS类库引用

modules 里面是 扩展功能类库，已经引入highcharts.js，再开发maps、treemaps，只需引入map.js、treemap.js等。

“highstock.js”包含”highcharts.js” 的主要功能，同时在一个页面里面使用highstock和highcharts，只需要引入”highstock.js”   和  “highcharts-more.js”。

7、“load”和“redraw”事件重设数据点的宽度等（除了使用属性，还要使用回调函数修改属性不能修改的图表部分）

var changeWidth = function(chart) {
Highcharts.each(chart.series[0].data, function(p, i) {
var width = p.graphic.element.width.animVal.value – 1;
p.graphic.attr({
width: p.y,
transform: ‘translate(‘ + (width – p.y) / 2 + ‘,0)’
});
});
};

$(‘#container’).highcharts({
chart: {

type: ‘column’,
events: {
load: function() {
var chart = this;
changeWidth(chart);
},
redraw: function() {
var chart = this;
changeWidth(chart);
}
}
}}

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style>
    b{font-size: 25px;}
  </style>
</head>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="charttest.js?ver=1900"></script>
<body>
<h2> 设计图</h2>
<img src="chart.jpg" height="310" width="800">
<ul>
<li><h1>有哪些坑？？？和常规图表有哪些不同</h1></li>
  <li><b>1、一个数据点有两个label???</b></li>
  <li><b>2、colmn柱形图渐变而且每根柱子的透明度在增加</b></li>
  <li><b>3、x轴坐标左边线对齐，不是居中，也不是正对着线</b></li>
  <li><b>4、最后一根柱子是前面柱子宽度的两倍</b></li>
  <li><b>5、最后一根柱子后面分割线不见了</b></li>
  <p><h1>My god,这些基本配置搞不定了，怎么办？？？</h1>
  <img src="chartapi.jpg" height="1050" width="700">
  </p>
  <p><h1>答：可以使用图表的重绘回调函数，有那么好用吗？那么多图表元素渲染后都是些什么？ Highcharts并没有给出说明，怎么办？  猜！</h1>
  <img src="chartapi2.jpg" height="300" width="700">
  </p>
</ul>
<h2> 做出来的图表</h2>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <p><a href="博客地址" rel="external nofollow" >博客地址</a><a href="http://jsfiddle.net/starrycheng/dL6rebf5/19/" rel="external nofollow" >jsFiddle地址</a></p>
</body>
</html>
$(function() {  var secondDataLabel = function(chart) { // on complete
      $('.secondDataLabel').remove();
      var points = chart.series[0].points,
        plotLeft = chart.plotLeft,
        plotHeight = chart.plotHeight,
        plotTop = chart.plotTop;      Highcharts.each(points, function(p, i) {
　　　　　//设置渐变
        p.graphic.element.style.opacity = 0.1 + 0.05 * i;
        var element = p.graphic.element,
          width = element.width.animVal.value;
　　　　　　//设置最后一个柱子的宽度
        if (i === (points.length - 1)) {
          p.graphic.attr({
            width: width * 2 + 2
          });
　　　　　　//移动最后一个数据点dataLable的位置
          p.dataLabel.translate(parseInt(element.attributes[0].value) + plotLeft + width - p.dataLabel.padding - p.dataLabel.width / 2, p.dataLabel.y);
          chart.renderer.label('L' + i, parseInt(element.attributes[0].value) + plotLeft + width - p.dataLabel.padding, plotHeight + plotTop - 25)
            .attr({
              'text-anchor': 'middle',
              zIndex: 6
            })
            .css({
              color: '#697D91',
              fontSize: '14px'
            }).addClass('secondDataLabel')
            .add();        } else {
　　　　　　//移动每个数据点的位置
          chart.renderer.label('L' + i, parseInt(element.attributes[0].value) + plotLeft + (width / 2) - p.dataLabel.padding, plotHeight + plotTop - 25)
            .attr({
              'text-anchor': 'middle',
              zIndex: 6
            })
            .css({
              color: '#697D91',
              fontSize: '14px'
            }).addClass('secondDataLabel')
            .add();
        }
      });
    },
　　
　　//移动X坐标轴Label的位置
    positionLabels = function(chart) {
      var xAxis = chart.xAxis[0];
      xAxis.labelGroup.attr({
        'transform': 'translate(' + (-xAxis.slotWidth / 2) + ',-6)'
      });
    },　　//删除最后两个格子线
    deleteGridElements = function(chart) {
      var xAxis = chart.xAxis[0],
        gridElements = xAxis.gridGroup.element.children;
      gridElements[gridElements.length - 2].remove();
      gridElements[gridElements.length - 2].remove();
    },
　　//删除x轴上最后两个刻度
    deleteTick = function() {
      var ticks = $('.highcharts-axis')[0].children;
      ticks[ticks.length - 4].remove();
    },
    loadOrRedrawChart = function(chart, load) {
      secondDataLabel(chart);
      positionLabels(chart);
    };  $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          loadOrRedrawChart(this);
          deleteTick();
          deleteGridElements(this);
        },
        redraw: function() {
          loadOrRedrawChart(this);
        }
      }
    },
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      series: {
        pointPadding: 0,
        groupPadding: 0,
        borderWidth: 0,
        shadow: false
      },
      column: {
        dataLabels: {
          enabled: true,
          // format: '<span style="color:#FC7946;font-size:14px;">{point.y}</span><span style="color:#FC7946;font-size:10px;">%</span>',
          useHTML: true,
          format: '{y:.2f} %',
          style: {
            fontSize: '14px',
            color: '#FC7946'
          }
        },
        borderWidth: 0,
        color: {
          linearGradient: {
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 1
          },
          stops: [
            [0, '#55ACEE'],
            [1, '#FFFFFF']
          ]
        },
      }
    },
    credits: {
      enabled: false
    },
    yAxis: {
      gridLineWidth: 0,
      max: 7,
      title: null,
      labels: {
        enabled: false
      }
    },
    xAxis: {
      max: 9,
      showLastLabel: false,
      gridLineColor: '#D8E2E9',
      gridLineDashStyle: 'shortdash',
      gridLineWidth: 1,
      categories: [
        '第1天',
        '第8天',
        '第14天',
        '第28天',
        '第61天',
        '第91天',
        '第112天',
        '第153天',
        '第183天',
      ],
      labels: {
        align: 'left',
        style: {
          color: '#9DACB6',
          fontSize: '12px',        }
      }
    },
    series: [{
      type: 'column',
      name: '收益',
      data: [4.2, 4.4, 4.6, 4.8, 5.0, 5.2, 5.4, 5.6, 5.8]
    }]
  });
});

　　

阶梯柱形图：http://jsfiddle.net/starrycheng/dL6rebf5/19/

空心饼图：

http://jsfiddle.net/starrycheng/pnh4ek94/6/

http://jsfiddle.net/6w9js32j/12/

$(function() {

//将标签扩展到Legend
(function(H) {
H.wrap(H.Legend.prototype, ‘render’, function(proceed) {
// Run original proceed method
proceed.apply(this, [].slice.call(arguments, 1));
// 绘制线
this.chart.renderer.path([‘M’, -10, 16, ‘L’, -10, -16 + this.legendHeight])
.attr({
‘stroke-width’: 1,
stroke: ‘#D8E2E9’
})
.add(this.group);

//绘制高
this.chart.renderer.label(‘高’, -20, 10)
.css({
color: ‘#4595CA’
})
.attr({
fill: ‘#fff’,
padding: 4,
r: 10,
zIndex: 6,
stroke: ‘#4595CA’,
‘stroke-width’: 1
})
.add(this.group);

//绘制低
this.chart.renderer.label(‘低’, -20, -30 + this.legendHeight)
.css({
color: ‘#F69279’
})
.attr({
fill: ‘#fff’,
padding: 4,
r: 10,
zIndex: 6,
stroke: ‘#F69279’,
‘stroke-width’: 1

})
.add(this.group);
});
}(Highcharts));

// let loadOrRedrawChart=(chart)=>{
// // let x=chart.legend.group.translateX;
// // let y=chart.legend.group.translateY;
// // let height=chart.legend.legendHeight;

// // chart.renderer.path([‘M’, x-26, y+16, ‘L’, x-26, y-16 + height])
// // .attr({
// // ‘stroke-width’: 1,
// // stroke: ‘#D8E2E9’
// // })
// // .add(this.group);

// // chart.renderer.label(‘高’, x-13, y+8)
// // .css({
// // color: ‘#4595CA’
// // })
// // .attr({
// // fill: ‘#fff’,
// // padding: 4,
// // r: 10,
// // zIndex: 6
// // })
// // .add();
// }

var title = “<span style=’width:80px;text-align:center;display:inline-block;’>借款人</span><br/><span style=’width:80px;text-align:center;display:inline-block;’>信用等级</span>”
Highcharts.getOptions().plotOptions.pie.colors = [‘#628BD5’, ‘#5CA6F4’, ‘#80CBFD’, ‘#ACE9F6’, ‘#C7EEB2’, ‘#FFCB85’, ‘#F69279’];
$(‘#container’).highcharts({
chart: {
type: ‘pie’
// events: {
// load: function() {
// loadOrRedrawChart(this);
// },
// redraw: function() {
// loadOrRedrawChart(this);
// }
// }
},
title: {
text: title,
align: ‘center’,
verticalAlign: ‘middle’,
y: -4,
x: -50,
style: {
fontSize: ’15px’,
color: ‘#697D91’
},
useHTML: true
},
legend: {
align: ‘right’,
verticalAlign: ‘middle’,
layout: ‘vertical’,
x: 15,
y: 0,
itemMarginTop: 3,
itemMarginBottom: 3,
itemStyle: {
color: ‘#697D91’
},
labelFormat: ‘{name} {y:.2f}%’
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},

plotOptions: {
pie: {
borderWidth: 0,
innerSize: ‘65%’,
allowPointSelect: false,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: true
},

series: [{
data: [
[‘A级’, 10],
[‘B级’, 20],
[‘C级’, 20],
[‘D级’, 20],
[‘E级’, 20],
[‘F级’, 15],
[‘G级’, 5]
]
}]
});
});

点赞 319

贡献者

上一篇： Seaborn相关
下一篇： 【BZOJ4671】(斯特林反演)
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,082
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,557
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,406
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,815
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,898
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
42
收藏
0
人气
140,390
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页