HCharts随笔之简单入门

时间:2023-03-09 21:07:09
HCharts随笔之简单入门

此处可以对比我的另一个Echars简单入门

直接上源码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HCharts</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
<!-- 为HCharts准备一个具备大小(宽高)的Dom -->
<!--<div id="container" style="width: 400px;height:400px;"></div>-->
<div id="container" style="width: 600px;min-width:400px;height:400px"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var chart = Highcharts.chart('container',{
chart: {
type: 'column'
},
credits: {
//去除highcharts的水印链接
enabled:false
},
title: {
text: 'HCharts 入门示例'
},
xAxis: {
categories: [
'衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'
],
},
yAxis: {
min: 0,
title: {
text: '销量'
}
},
series: [{
name: '销量',
data: [5, 20, 36, 10, 10, 20]
}]
});
</script>
</body>
</html>

显示效果:

HCharts随笔之简单入门