highchart 学习
作者：互联网
###感谢 官方文档， 在线实例：https://api.highcharts.com.cn/highcharts
在线实例： 更新数据列数据，更新饼图数据
highchart 知识太多，所以开启出一个新版本的文本，highchart.txt 来看
-》serias 是最重要的，包括X轴的度量，和Y轴的值都来自 serias的data 数组
-》相反X轴，Y轴的仅仅是定义的图标值，反而用处不大。
##sample 1:
//setdata 测试
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 曲线图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
//<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="container"></div>
<button id="button" class="autocompare">设置相同长度的数据（有动画效果）</button>
<button id="button2" class="autocompare">设置不同长度的数据（无动画效果）</button>
<script language="JavaScript">
$(function () {
var chart = Highcharts.chart('container', {
xAxis: { type: 'datetime', labels: {enabled:true}},
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]
}]
});
// the button action
$('#button').click(function () {
var data = [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];
chart.series[0].setData(data);
});
$('#button2').click(function () {
var newDataLength = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 23];
chart.series[0].setData(newDataLength);
});
});
</script>
</body>
</html>
###sample 2:
datetime 类型的X 轴测试 pointStart
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 曲线图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="height: 400px; width: 500px"></div>
<script language="JavaScript">
$(function () {
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
//dateTimeLabelFormats: {
// day: '%e of %b'
//}
},
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
});
</script>
</body>
</html>
####sample 3:
// JSON.stringify 直接在HTML 版本 打出
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 曲线图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
//<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="container"></div>
<button id="button" class="autocompare">设置相同长度的数据（有动画效果）</button>
<button id="button2" class="autocompare">设置不同长度的数据（无动画效果）</button>
<textarea id="search_one_result" cols="50" rows="10" style="margin-top: 30px"></textarea>
<script language="JavaScript">
$(function () {
var chart = Highcharts.chart('container', {
xAxis: { type: 'datetime', labels: {enabled:true}},
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]
data:[[1591287600000,0],[1591287659999,5],[1591287779999,10]]
}]
});
// the button action
$('#button').click(function () {
var data = [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];
chart.series[0].setData(data);
});
$('#button2').click(function () {
newDataLength=[]
newDataLength = [[1591287600000,0],[1591287659999,5],[1591287660000,0],[1591287719999,0],[1591287720000,9],[1591287779999,0],[1591287780000,0],[1591287839999,0],[1591287840000,0],[1591287899999,0],[1591287900000,0]];
chart.series[0].setData(newDataLength);
$("#search_one_result").val(JSON.stringify(newDataLength, null, "\t"));
$("#search_one_result").val(JSON.stringify(newDataLength, null, 4));
});
});
</script>
</body>
</html>
###sample 3
###感谢sily-boy https://www.cnblogs.com/sily-boy/p/5870927.html
Highcharts 基本曲线图
###感谢 官方文档， 在线实例：https://api.highcharts.com.cn/highcharts
在线实例： 更新数据列数据，更新饼图数据
highchart 知识太多，所以开启出一个新版本的文本，highchart.txt 来看
https://jshare.com.cn/highcharts/hhhhf0
https://jshare.com.cn/highcharts/hOPfGA
###感谢 runoob
https://www.runoob.com/perl/perl-operators.html
标签：function,newDataLength,highchart,series,chart,学习,data,highcharts 来源： https://www.cnblogs.com/feiyun8616/p/13050248.html