谷歌折线图上的趋势线
Trendline On Google Line Chart
我试图弄清楚如何在我的谷歌折线图中添加趋势线,但惨遭失败。有人能为我指出正确的方向吗?我已经看到谷歌没有提供在折线图上执行此操作的方法,但也看到可以在图表中添加一个新系列以实现类似的东西。这是我到目前为止所拥有的,除了没有趋势线之外,效果很好。我尝试了一些我在网上找到的建议,但没有一个让数学清楚,使趋势线成为一条直线:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('string', Date);
data.addColumn('number', 'Sales Value');
data.addRow(['Apr 2013', 271176.940000000]);
data.addRow(['May 2013', 419031.540000000]);
data.addRow(['Jun 2013', 429155.540000000]);
data.addRow(['Jul 2013', 443780.400000000]);
data.addRow(['Aug 2013', 320353.540000000]);
data.addRow(['Sep 2013', 310640.910000000]);
data.addRow(['Oct 2013', 252187.700000000]);
data.addRow(['Nov 2013', 301414.560000000]);
data.addRow(['Dec 2013', 224296.850000000]);
data.addRow(['Jan 2014', 291131.140000000]);
data.addRow(['Feb 2014', 354750.680000000]);
data.addRow(['Mar 2014', 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
{
color: 'green',
}
},
title: '1: TEST NAME',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();
编辑:
我现在尝试将代码放入建议给我的代码,但它仍然没有显示趋势线:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales Value');
data.addRow([new Date(2013, 4, 1), 184656.440000000]);
data.addRow([new Date(2013, 5, 1), 420286.250000000]);
data.addRow([new Date(2013, 6, 1), 431562.840000000]);
data.addRow([new Date(2013, 7, 1), 446187.800000000]);
data.addRow([new Date(2013, 8, 1), 320353.540000000]);
data.addRow([new Date(2013, 9, 1), 313364.960000000]);
data.addRow([new Date(2013, 10, 1), 252187.700000000]);
data.addRow([new Date(2013, 11, 1), 303874.560000000]);
data.addRow([new Date(2013, 12, 1), 224296.850000000]);
data.addRow([new Date(2014, 1, 1), 297499.970000000]);
data.addRow([new Date(2014, 2, 1), 354950.680000000]);
data.addRow([new Date(2014, 3, 1), 315529.610000000]);
data.addRow([new Date(2014, 4, 1), 145219.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 320;
var chartWidth = 400;
var chartOptions = {
trendlines: {
0: {
color: 'green'
}
},
title: '1: Test Name',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'MMM yyyy',
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 8),
height: (chartHeight - 72)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
};
drawChartCustomerRevenue_93();
首先,正如@mcgyver5指出的,离散(基于字符串)轴不支持趋势线。 由于您的数据是每月一次,因此您可以切换到日期轴而不是字符串轴,这将解决此问题。 此外,未正确指定trendlines
选项。
下面是一个修复这两个问题的示例:
function drawChartCustomerRevenue_93() {
var revenueChart_93;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales Value');
data.addRow([new Date(2013, 3, 1), 271176.940000000]);
data.addRow([new Date(2013, 4, 1), 419031.540000000]);
data.addRow([new Date(2013, 5, 1), 429155.540000000]);
data.addRow([new Date(2013, 6, 1), 443780.400000000]);
data.addRow([new Date(2013, 7, 1), 320353.540000000]);
data.addRow([new Date(2013, 8, 1), 310640.910000000]);
data.addRow([new Date(2013, 9, 1), 252187.700000000]);
data.addRow([new Date(2013, 10, 1), 301414.560000000]);
data.addRow([new Date(2013, 11, 1), 224296.850000000]);
data.addRow([new Date(2014, 0, 1), 291131.140000000]);
data.addRow([new Date(2014, 1, 1), 354750.680000000]);
data.addRow([new Date(2014, 2, 1), 312736.710000000]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: '£'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 500;
var chartOptions = {
trendlines: {
0: {
color: 'green'
}
},
title: '1: TEST NAME',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D4'],
hAxis: {
title: 'Sales Value (£)',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'MMM yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
revenueChart_93 = new google.visualization.LineChart(document.getElementById('CustomerRevenue_93'));
revenueChart_93.draw(data, chartOptions);
}
在这里看到它的工作:http://jsfiddle.net/asgallant/j8N48/
看看:谷歌图表趋势线没有显示
也就是说,您的第一列不能是字符串,因为它不是连续域轴。
相关文章:
- charts js更改折线图轴的字体大小/颜色和背景线
- 具有任意多条线的D3折线图(以及特定的数据格式)
- 高图折线图:点应该是可点击的,点之间的线不是.这可能吗
- 为什么在交互式多系列折线图中使用 brushed() 时只有一条线被扩展
- cs.js - 同时仅显示一条线(在多折线图中)
- D3折线图中的实线和虚线
- 如何设置角度谷歌折线图的样式,使其在同一条线上有两种样式
- 使用角度nvd3js指令绘制一个包含实线和虚线的折线图
- 在折线图中在多条线上绘制点
- 高线图:给折线图添加标志
- 如何链接图表和表格?我的意思是在单击表格的行时,我必须能够突出显示折线图中的线
- D3:当鼠标悬停事件时,多系列折线图的每条线上都有工具提示
- 带空值的折线图:如何保持线连接
- 如何在jqplot柱状图中拥有比数据点更多的列,并在所有列上保持趋势线的连续性?
- 如何在morris折线图中的线点上显示y轴值
- 如何增加折线图的线宽
- 当数据是相同的高图时,如何使绘图线显示在折线图上
- 谷歌折线图上的趋势线
- 用角度绘制带有 d3 折线图中实际值的趋势线
- 为什么我的谷歌折线图不显示线