前端怎么用highcharts绘制简单曲线
那些年，我们玩过的highcharts。
最近一直都在忙各种事情，很少上技术贴啦，今天我来给大家上个技术贴，回馈一下新老小伙伴儿。
很多小伙伴看到网页上显示的那些图线，表示很惊讶，今天，我就来给大家揭开它神秘的面纱，一般来说，前端中用的多的做图表的插件有两个：
highcharts、echarts。今天只说highcharts
使用这个插件很容易就能做出很好看的图线。
只需要做如下操作，一个漂亮的曲线就出来了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码 */
</style>
<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com.cn/highstock/highstock.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 600px"></div>
//----------------js代码开始-----------------------
<script>
$.getJSON('https://data.jianshukeji.com/jsonp?filename=json/large-dataset.json&callback=?', function(data) {
Highcharts.stockChart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Y 轴滚动条'
},
yAxis: {
scrollbar: {
enabled: true,
showFull: false
}
},
tooltip: {
split: false
},
series: [{
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval
}]
});
});
</script>
//----------------js代码结束-----------------------
</body>
</html>
效果图如下所示。
不论你做啥图，你都可以用这个html模板，你需要改的仅仅是js部分，data是需要后端给你返回的，这个数据一般的json格式就可以用了，但是，强烈建议看官方文档，它要什么格式的数据，就得给它什么格式的，这儿是坑。其他倒是没什么，如有问题，欢迎小伙儿交流。抛砖引玉到此结束。
如有编程问题讨论，请关注微信公众号：
“软件编程网站开发”