Highcharts简单使用

本文主要是介绍Highcharts简单使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官网： https://api.highcharts.com.cn/highcharts

https://echarts.apache.org/zh/api.html#echarts

Highcharts对比Echarts类似于 Office 和 WPS ，功能都挺全面的。

复杂点的折线图一般会用到：

rangeSelector定义缩放区间
scrollbar定义滚动轴样式

bar是条形图，column是柱状图。

bar是横着的柱状图，视觉上的y轴实际却是x轴。

tooltip数据提示框 (类似title属性)

legend图例

plotOptions 数据列配置

bar使用示例：

    var options = {chart: {type: 'bar'},credits: {enabled: false // 去掉水印},title: {text: ''},subtitle: {text: ''},xAxis: {categories: ['项目1', '项目2', '项目3'] // 变量},yAxis: {min: 0,title: {text: ''},labels: {formatter: function () {return this.value + '万';}}},legend: {reversed: true},plotOptions: {bar: {pointWidth: 32,stacking: 'normal', // 堆叠方式dataLabels: {enabled: true,allowOverlap: false, // 允许数据标签重叠color: 'white',align: 'left',style: {textShadow: 'none',fontWeight: 'normal',fontFamily: 'sans-serif'},formatter: function () {var dd = (this.y / this.total) * 100;return dd.toFixed(0) + '%';}}}},tooltip: {shared: true,useHTML: true, // 使用html渲染formatter: function () {return '<span>this.y<span>';}},colors: ['#BBD5EF', '#5899DA'], // 定义到series的对象里也行series: [{name: '未完成量',data: [16.73, 3.27, 33]},{name: '已完成量',data: [3.36, 58.34, 90]}]};Highcharts.chart('container', options);

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<div id="container" style="height: 270px"></div>

这篇关于Highcharts简单使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---