如何將趨勢線添加到高圖
[英]How to add trend line to high charts
問題描述
這是高圖表圖形代碼。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我想為該圖表添加趨勢線，我在Google中搜索並從以下鏈接獲取了代碼： https : //github.com/virtualstaticvoid/highcharts_trendline ，我添加了這樣的趨勢線代碼。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
var chart_linear = new highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
enableMouseTracking: false
}
},
series: [{
type: 'scatter',
data: sourceData
},
{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
});
</script>
</head>
<body>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
以及根據x軸和y軸值起作用但在x軸上的值是按日期排列且y軸的值是數字的趨勢線，請找到第一個代碼的屏幕截圖：
這就是趨勢線快照。 請找到。
請共享我想在同一頁面中添加兩個圖的任何代碼，但我嘗試過，但是兩個圖的x軸和y軸值不同。
謝謝。
2 個解決方案
解決方案1
5 已采納 2014-08-26 13:25:07
眾多問題。
1.）您並未真正將回歸代碼集成到繪圖中，只是從示例中剪切/粘貼並過度繪制了繪圖。 您需要將回歸線作為第二個序列添加到繪圖中：
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: sourceData
},{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
2.）這是無效的javascript：
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
這些是字符串，沒有被引用。 無論如何，字符串都不會減少回歸，它需要數字。 由於您的日期實際上是類別，因此只需使用：
var sourceData = [
[0, 99.75], [1, 99.77],
[2, 99.78], [3, 99.84],
[4, 99.82], [5, 99.82],
[6, 99.76], [7, 99.78],
[8, 99.8], [9, 99.65],
[10, 99.94], [11, 99.8]
];
3.）您的系列名稱對於右側圖例來說太長了（它擠壓了劇情）。 在我的示例中，我將其移至底部。
這是將所有這些放在一起的示例 。
解決方案2
0 2016-10-19 20:00:30
您可以使用此插件 ，我相信它會做您想做的事。
$(function() { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { $('#container').highcharts('StockChart', { title : { text : 'AAPL Stock Price' }, subtitle: { text: 'From may 15, 2006 to May 10, 2013' }, xAxis: { ordinal: false }, yAxis: { title : { text : 'Price' } }, legend: { enabled: true, layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series : [{ name: 'Stock Price', type : 'line', id: 'primary', data : data }, { name: 'Linear Trendline', linkedTo: 'primary', showInLegend: true, enableMouseTracking: false, type: 'trendline', algorithm: 'linear' }] }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> <script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script> <div id="container" style="min-width: 500x; height: 400px; margin: 0 auto"></div>
資料來源： http : //www.highcharts.com/plugin-registry/single/16/technical-indicators
Google圖表有問題地獲取第一個點和最后一個點的趨勢線值
[英]Google charts, problematically get trend line value for first and last points
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.