谷歌图表意外绘制趋势线
问题描述 投票：0回答：1
使用 Google 图表（组合图表）。它似乎会自动在累积线下方绘制一条趋势线。
我知道我可以添加趋势线。但我还没有，谷歌图表无论如何都会添加一个！我该如何阻止它这样做？
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart'], 'language': 'en_GB'});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable(
[[{"type":"date","label":"Period"},"Order QTY","Revenue","Target (Revenue)","Cumulative","Target (Cumulative)"],["Date(2023, 9, 01)",6,126.3,3733.3333333333335,126.3,112000],["Date(2023, 9, 02)",14,4925.46,3733.3333333333335,5051.76,112000],["Date(2023, 9, 03)",21,16751.65,3733.3333333333335,21803.410000000003,112000],["Date(2023, 9, 04)",20,774.18,3733.3333333333335,22577.590000000004,112000],["Date(2023, 9, 05)",19,7702.63,3733.3333333333335,30280.220000000005,112000],["Date(2023, 9, 06)",26,5711.16,3733.3333333333335,35991.380000000005,112000],["Date(2023, 9, 07)",7,101.71,3733.3333333333335,36093.090000000004,112000],["Date(2023, 9, 08)",7,239.8,3733.3333333333335,36332.89000000001,112000],["Date(2023, 9, 09)",32,8148.77,3733.3333333333335,44481.66,112000],["Date(2023, 9, 10)",14,1256.23,3733.3333333333335,45737.89000000001,112000],["Date(2023, 9, 11)",38,5964.22,3733.3333333333335,51702.11000000001,112000],["Date(2023, 9, 12)",26,1883.59,3733.3333333333335,53585.700000000004,112000],["Date(2023, 9, 13)",21,10981.02,3733.3333333333335,64566.72,112000],["Date(2023, 9, 14)",12,263.63,3733.3333333333335,64830.35,112000],["Date(2023, 9, 15)",8,136.66,3733.3333333333335,64967.01,112000],["Date(2023, 9, 16)",32,1238.84,3733.3333333333335,66205.85,112000],["Date(2023, 9, 17)",27,8939.29,3733.3333333333335,75145.14000000001,112000],["Date(2023, 9, 18)",37,6082.73,3733.3333333333335,81227.87000000001,112000],["Date(2023, 9, 19)",26,7123.39,3733.3333333333335,88351.26000000001,112000],["Date(2023, 9, 20)",29,2875.15,3733.3333333333335,91226.41,112000],["Date(2023, 9, 21)",8,68.99,3733.3333333333335,91295.40000000001,112000],["Date(2023, 9, 22)",5,20,3733.3333333333335,91315.40000000001,112000],["Date(2023, 9, 23)",23,7521.06,3733.3333333333335,98836.46,112000],["Date(2023, 9, 24)",12,494.32,3733.3333333333335,99330.78000000001,112000],["Date(2023, 9, 25)",17,3556.01,3733.3333333333335,102886.79000000001,112000],["Date(2023, 9, 26)",22,1168.64,3733.3333333333335,104055.43000000001,112000],["Date(2023, 9, 27)",17,2480.15,3733.3333333333335,106535.58,112000],["Date(2023, 9, 28)",5,332.6,3733.3333333333335,106868.18000000001,112000],["Date(2023, 9, 29)",10,99.95,3733.3333333333335,106968.13,112000],["Date(2023, 9, 30)",17,2680.08,3733.3333333333335,109648.21,112000],["Date(2023, 8, 30)",0,0,3733.3333333333335,0,112000]] );
var options = {
title : 'Last Month',
seriesType: 'bars',
vAxis: {
title : 'Revenue',
format: '£#,##0'
},
hAxis: {
format: 'd'
},
series: {
0: { // order qty
visibleInLegend: false,
color: '#D3D3D3',
targetAxisIndex: 1
},
1: { // revenue
color: '#cf0800',
},
2: { // revenue target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
color: '#cf0800'
},
3: { // cumulative
type: 'line',
targetAxisIndex: 2
},
4: { // cumulative target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
targetAxisIndex: 2,
color: '#304991',
},
},
vAxes: {
1: {
title: '',
textPosition: 'none'
},
2: {
title: 'Cumulative'
}
},
colors:['#cf0800', '#304991']
};
var chart_div = document.getElementById('chart_div_655b2ffdb9f5d' );
var chart = new google.visualization.ComboChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
/*google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});*/
chart.draw(data, options);
}
</script>
<div id="chart_div_655b2ffdb9f5d" style="width:600px;height:200px; margin:0 auto;"></div>这是JsFiddle。我已经尽可能地缩小了它，并删除了几乎所有内容，并且这条位于培养线下方的奇怪的蓝线不会消失。
我认为这可能与
series: {}1个回答
0
投票
投票
“累积线下方的奇怪蓝线”不是趋势线。
它是连接数据表中最后一个数据点和第一个数据点的线，
因为数据行是乱序的。
最后一行是 SEP，之前的所有行都是 OCT。
因此，您需要将 SEP 行移动到数据表中的第一个，
或者在绘制之前对数据表进行排序...
data.sort({column: 0}); // sort by date column
请参阅以下工作片段...
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart'], 'language': 'en_GB'});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable(
[[{"type":"date","label":"Period"},"Order QTY","Revenue","Target (Revenue)","Cumulative","Target (Cumulative)"],["Date(2023, 9, 01)",6,126.3,3733.3333333333335,126.3,112000],["Date(2023, 9, 02)",14,4925.46,3733.3333333333335,5051.76,112000],["Date(2023, 9, 03)",21,16751.65,3733.3333333333335,21803.410000000003,112000],["Date(2023, 9, 04)",20,774.18,3733.3333333333335,22577.590000000004,112000],["Date(2023, 9, 05)",19,7702.63,3733.3333333333335,30280.220000000005,112000],["Date(2023, 9, 06)",26,5711.16,3733.3333333333335,35991.380000000005,112000],["Date(2023, 9, 07)",7,101.71,3733.3333333333335,36093.090000000004,112000],["Date(2023, 9, 08)",7,239.8,3733.3333333333335,36332.89000000001,112000],["Date(2023, 9, 09)",32,8148.77,3733.3333333333335,44481.66,112000],["Date(2023, 9, 10)",14,1256.23,3733.3333333333335,45737.89000000001,112000],["Date(2023, 9, 11)",38,5964.22,3733.3333333333335,51702.11000000001,112000],["Date(2023, 9, 12)",26,1883.59,3733.3333333333335,53585.700000000004,112000],["Date(2023, 9, 13)",21,10981.02,3733.3333333333335,64566.72,112000],["Date(2023, 9, 14)",12,263.63,3733.3333333333335,64830.35,112000],["Date(2023, 9, 15)",8,136.66,3733.3333333333335,64967.01,112000],["Date(2023, 9, 16)",32,1238.84,3733.3333333333335,66205.85,112000],["Date(2023, 9, 17)",27,8939.29,3733.3333333333335,75145.14000000001,112000],["Date(2023, 9, 18)",37,6082.73,3733.3333333333335,81227.87000000001,112000],["Date(2023, 9, 19)",26,7123.39,3733.3333333333335,88351.26000000001,112000],["Date(2023, 9, 20)",29,2875.15,3733.3333333333335,91226.41,112000],["Date(2023, 9, 21)",8,68.99,3733.3333333333335,91295.40000000001,112000],["Date(2023, 9, 22)",5,20,3733.3333333333335,91315.40000000001,112000],["Date(2023, 9, 23)",23,7521.06,3733.3333333333335,98836.46,112000],["Date(2023, 9, 24)",12,494.32,3733.3333333333335,99330.78000000001,112000],["Date(2023, 9, 25)",17,3556.01,3733.3333333333335,102886.79000000001,112000],["Date(2023, 9, 26)",22,1168.64,3733.3333333333335,104055.43000000001,112000],["Date(2023, 9, 27)",17,2480.15,3733.3333333333335,106535.58,112000],["Date(2023, 9, 28)",5,332.6,3733.3333333333335,106868.18000000001,112000],["Date(2023, 9, 29)",10,99.95,3733.3333333333335,106968.13,112000],["Date(2023, 9, 30)",17,2680.08,3733.3333333333335,109648.21,112000],["Date(2023, 8, 30)",0,0,3733.3333333333335,0,112000]] );
var options = {
title : 'Last Month',
seriesType: 'bars',
vAxis: {
title : 'Revenue',
format: '£#,##0'
},
hAxis: {
format: 'd'
},
series: {
0: { // order qty
visibleInLegend: false,
color: '#D3D3D3',
targetAxisIndex: 1
},
1: { // revenue
color: '#cf0800',
},
2: { // revenue target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
color: '#cf0800'
},
3: { // cumulative
type: 'line',
targetAxisIndex: 2
},
4: { // cumulative target
type: 'line',
visibleInLegend: false,
lineWidth: '1',
targetAxisIndex: 2,
color: '#304991',
},
},
vAxes: {
1: {
title: '',
textPosition: 'none'
},
2: {
title: 'Cumulative'
}
},
colors:['#cf0800', '#304991']
};
var chart_div = document.getElementById('chart_div_655b2ffdb9f5d' );
var chart = new google.visualization.ComboChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
/*google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});*/
data.sort({column: 0}); // sort by date column
chart.draw(data, options);
}
</script>
<div id="chart_div_655b2ffdb9f5d" style="width:600px;height:200px; margin:0 auto;"></div>最新问题
- 如何在 Flutter 中加载并呈现来自网络的 PDF 文件
- 未捕获的错误：渲染的钩子比预期少。这可能是由于意外的提前退货声明造成的
- Python 枕头上的图像背景变黑
- 在Kotlin中解析webp文件头获取其高度和宽度，但得到意想不到的结果
- Spring GCP 存储 - 我们计算的请求签名与您提供的签名不匹配。检查您的 Google 密钥和签名方法
- 收到“错误请求”错误，HTTP 错误代码为 400
- PDF2HTMLEX 将文本放入图像中
- Pymodbus 读/写浮点（REAL）
- WinUI3（Windows App SDK）全球化异常处理
- 键盘不会出现在应用程序 Web 视图中的 Flutter 中
- 如何在react中拆分大型json fetch
- 将多个 JSON 对象记录到单个文件 - 文件格式
- 是否可以使用私有 API 捕获 iOS 设备上的所有音频输出并通过欧盟的替代应用商店分发应用程序？
- Python 图像修复效果不佳
- Flutter：如何限制用户在给定时间段内点击按钮的次数？
- 使用默认模拟时，模拟函数的调用未正确注册
- codeigniter php 中的多个图片上传问题
- Telethon：操作错误：数据库已锁定
- 需要将曾祖父母、祖父母、父亲、孩子等分组......在spark中单行记录
- 在 google colab 中保存 pip 安装
© www.soinside.com 2019 - 2024. All rights reserved.