使用Angular中的ng2-google-charts自定义x轴上标签之间的间距
我正在使用ng2-google-charts将一些AngularJS代码迁移到现代Angular中，并且遇到了一个问题，迫使图中出现空白。
该应用程序涉及两个Google图形-一个提供折线图，另一个与提供面积图的图重叠。我的问题是，在原始的AngularJS应用程序中，1900年到2015年之间的差距很小，但是我不确定如何在新的Angular代码中实现这一点。两种版本中图表和数据的配置相同。新版本使用ng2-google-charts，而旧版本仅直接使用Google Charts API，但这是唯一的区别。
这是原始图形的样子，面积图上有1900年到2015年之间的差距，因此折线图适合它们之间。
https://uwsgi-docs.readthedocs.io/en/latest/HTTP.html
这就是新版本的样子-没有差距，我不确定如何制作。这是我需要帮助的地方。
app.component.ts
import { Component } from '@angular/core';
import { GoogleChartInterface } from 'ng2-google-charts/google-charts-interfaces';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'chart';
public lineChart: GoogleChartInterface = {
chartType: 'LineChart',
dataTable: [ ["Year", "Temp"],
[1880, 0.54],
[1881, 0.648],
[1882, 0.648],
[1883, 0.504],
[1884, 0.396],
[1885, 0.36],
[1886, 0.396],
[1887, 0.306],
[1888, 0.486],
[1889, 0.576],
[1890, 0.18],
[1891, 0.324],
[1892, 0.216],
[1893, 0.198],
[1894, 0.27],
[1895, 0.36],
[1896, 0.612],
[1897, 0.558],
[1898, 0.306],
[1899, 0.558],
[1900, 0.648],
[1901, 0.522],
[1902, 0.324],
[1903, 0.162],
[1904, 0.018],
[1905, 0.252],
[1906, 0.396],
[1907, 0.108],
[1908, 0],
[1909, 0.018],
[1910, 0.108],
[1911, 0],
[1912, 0.198],
[1913, 0.216],
[1914, 0.54],
[1915, 0.666],
[1916, 0.27],
[1917, 0.234],
[1918, 0.414],
[1919, 0.414],
[1920, 0.414],
[1921, 0.522],
[1922, 0.378],
[1923, 0.396],
[1924, 0.342],
[1925, 0.522],
[1926, 0.666],
[1927, 0.522],
[1928, 0.468],
[1929, 0.252],
[1930, 0.612],
[1931, 0.648],
[1932, 0.576],
[1933, 0.342],
[1934, 0.594],
[1935, 0.522],
[1936, 0.576],
[1937, 0.738],
[1938, 0.72],
[1939, 0.756],
[1940, 0.936],
[1941, 1.116],
[1942, 1.044],
[1943, 1.044],
[1944, 1.296],
[1945, 1.08],
[1946, 0.756],
[1947, 0.684],
[1948, 0.684],
[1949, 0.666],
[1950, 0.486],
[1951, 0.756],
[1952, 0.81],
[1953, 0.936],
[1954, 0.558],
[1955, 0.522],
[1956, 0.414],
[1957, 0.864],
[1958, 0.972],
[1959, 0.882],
[1960, 0.81],
[1961, 0.9],
[1962, 0.936],
[1963, 0.954],
[1964, 0.504],
[1965, 0.63],
[1966, 0.72],
[1967, 0.738],
[1968, 0.72],
[1969, 0.936],
[1970, 0.828],
[1971, 0.63],
[1972, 0.81],
[1973, 1.062],
[1974, 0.63],
[1975, 0.774],
[1976, 0.63],
[1977, 1.116],
[1978, 0.972],
[1979, 1.17],
[1980, 1.242],
[1981, 1.314],
[1982, 1.098],
[1983, 1.386],
[1984, 1.026],
[1985, 1.008],
[1986, 1.17],
[1987, 1.44],
[1988, 1.44],
[1989, 1.296],
[1990, 1.548],
[1991, 1.494],
[1992, 1.224],
[1993, 1.278],
[1994, 1.368],
[1995, 1.584],
[1996, 1.35],
[1997, 1.692],
[1998, 1.908],
[1999, 1.566],
[2000, 1.53],
[2001, 1.746],
[2002, 1.854],
[2003, 1.872],
[2004, 1.8],
[2005, 1.944],
[2006, 1.872],
[2007, 1.872],
[2008, 1.746],
[2009, 1.908],
[2010, 2.034],
[2011, 1.8],
[2012, 1.89],
[2013, 1.962],
[2014, 2.106],
[2015, 2.394]
],
options: {
x: {
0: {
side: 'top'
}
},
height: 313,
width:263,
curveType: 'function',
colors: ['#333'],
legend: {
position: 'none'
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
},
baselineColor: 'transparent'
},
hAxis: {
format: 'none',
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
chartArea: {
left: 0,
top: 0,
width: "100%",
height: "100%"
},
backgroundColor: {
fill: 'transparent'
},
enableInteractivity: false
}
};
public areaChart: GoogleChartInterface = {
chartType: 'AreaChart',
dataTable: [
['Year', 'Baseline', 'Coal Power Plants', 'Natural Gas', 'Waste', 'Farming', 'Factories', 'Buildings', 'Houses', 'Ships', 'Planes', 'Cars & Trucks', 'temp'],
['1900', undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 60.1],
['2015', 56.5, 0.55, 0.30, 0.13, 0.28, 0.28, 0.32, 0.19, 0.04, 0.05, 0.3, 60.1],
['2020', 56.5, 0.59, 0.32, 0.13, 0.3, 0.3, 0.34, 0.2, 0.04, 0.05, 0.33, 60.1],
['2030', 56.5, 0.71, 0.37, 0.15, 0.34, 0.35, 0.41, 0.24, 0.05, 0.05, 0.39, 60.1],
['2040', 56.5, 0.83, 0.43, 0.17, 0.39, 0.42, 0.48, 0.29, 0.06, 0.06, 0.46, 60.1],
['2050', 56.5, 0.98, 0.5, 0.19, 0.45, 0.49, 0.57, 0.34, 0.07, 0.07, 0.54, 60.1],
['2060', 56.5, 1.14, 0.57, 0.21, 0.5, 0.57, 0.66, 0.39, 0.08, 0.09, 0.63, 60.1],
['2070', 56.5, 1.31, 0.63, 0.23, 0.55, 0.66, 0.76, 0.45, 0.09, 0.1, 0.72, 60.1],
['2080', 56.5, 1.47, 0.69, 0.24, 0.59, 0.74, 0.85, 0.51, 0.1, 0.11, 0.81, 60.1],
['2090', 56.5, 1.63, 0.74, 0.25, 0.62, 0.82, 0.94, 0.56, 0.11, 0.12, 0.9, 60.1],
['2100', 56.5, 1.77, 0.79, 0.26, 0.66, 0.89, 1.03, 0.61, 0.12, 0.14, 0.98, 60.1]
],
options: {
isStacked: 'absolute',
height: 690,
width: 1340,
areaOpacity: 0.5,
legend: {
position: 'none'
},
series: {
11: {
type: 'line',
color: '#f23573',
lineDashStyle: [2, 2]
}
},
colors: ['#dcf8fa', '#b720dd', '#f6705a', '#f89b2d', '#fbcb0a', '#91d957', '#46d999', '#3cd6d8', '#60bcfd', '#96a6fb', '#4459c8', '#f23573'],
vAxis: {
minValue: 56.3,
ticks: [57, 58, 59, 60, 61, 62, 63, 64],
format: '##.#',
viewWindowMode: 'explicit',
viewWindow: {
max: 64,
min: 56.3
}
},
hAxis: {
minValue: 1900,
ticks: [1900, 2015, 2020, 2030, 2040, 2050, 2060, 2070, 2080, 2090, 2100],
scaleType: 'linear'
},
chartArea: {
left: 60,
top: 40,
width: "90%",
height: "88%"
},
enableInteractivity: false
}
};
constructor(){
}
}
app.component.html
<div style="width:90%;height:700px;margin-left: 5.5em;margin-right: auto;margin-bottom: 3em;">
<google-chart [data]="areaChart"></google-chart>
</div>
<div id="linechart_container">
<google-chart [data]="lineChart" id="linechart_div"></google-chart>
</div>
app.component.scss
#linechart_container
{
position: absolute;
width: 263px;
height: 620px;
background-color: #DDD;
opacity: 0.8;
top:0px;
padding:0;
left: 156px;
padding-top: 1em;
}
#linechart_div
{
position: absolute;
width: 263px;
/*height:315px;*/
/*top:380px;*/
height: 313px;
top: 382px;
}
1 个答案:
答案 0 :(得分：0)
与目标行数据行类似，
您可以在数据表中添加几个空白行（undefined），以增加间隔。
['1900', undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 60.1],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
['2015', 56.5, 0.55, 0.30, 0.13, 0.28, 0.28, 0.32, 0.19, 0.04, 0.05, 0.3, 60.1],
然后设置图表的宽度和背景容器以填补空白。
// line chart width
options: {
height: 313,
width: 302,
...
/* background css */
#linechart_container {
position: absolute;
width: 302px;
...
请参阅以下工作摘要...
（尽管不是角形，但效果相同）
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'linechart_div',
dataTable: google.visualization.arrayToDataTable([
["Year", "Temp"],
[1880, 0.54],
[1881, 0.648],
[1882, 0.648],
[1883, 0.504],
[1884, 0.396],
[1885, 0.36],
[1886, 0.396],
[1887, 0.306],
[1888, 0.486],
[1889, 0.576],
[1890, 0.18],
[1891, 0.324],
[1892, 0.216],
[1893, 0.198],
[1894, 0.27],
[1895, 0.36],
[1896, 0.612],
[1897, 0.558],
[1898, 0.306],
[1899, 0.558],
[1900, 0.648],
[1901, 0.522],
[1902, 0.324],
[1903, 0.162],
[1904, 0.018],
[1905, 0.252],
[1906, 0.396],
[1907, 0.108],
[1908, 0],
[1909, 0.018],
[1910, 0.108],
[1911, 0],
[1912, 0.198],
[1913, 0.216],
[1914, 0.54],
[1915, 0.666],
[1916, 0.27],
[1917, 0.234],
[1918, 0.414],
[1919, 0.414],
[1920, 0.414],
[1921, 0.522],
[1922, 0.378],
[1923, 0.396],
[1924, 0.342],
[1925, 0.522],
[1926, 0.666],
[1927, 0.522],
[1928, 0.468],
[1929, 0.252],
[1930, 0.612],
[1931, 0.648],
[1932, 0.576],
[1933, 0.342],
[1934, 0.594],
[1935, 0.522],
[1936, 0.576],
[1937, 0.738],
[1938, 0.72],
[1939, 0.756],
[1940, 0.936],
[1941, 1.116],
[1942, 1.044],
[1943, 1.044],
[1944, 1.296],
[1945, 1.08],
[1946, 0.756],
[1947, 0.684],
[1948, 0.684],
[1949, 0.666],
[1950, 0.486],
[1951, 0.756],
[1952, 0.81],
[1953, 0.936],
[1954, 0.558],
[1955, 0.522],
[1956, 0.414],
[1957, 0.864],
[1958, 0.972],
[1959, 0.882],
[1960, 0.81],
[1961, 0.9],
[1962, 0.936],
[1963, 0.954],
[1964, 0.504],
[1965, 0.63],
[1966, 0.72],
[1967, 0.738],
[1968, 0.72],
[1969, 0.936],
[1970, 0.828],
[1971, 0.63],
[1972, 0.81],
[1973, 1.062],
[1974, 0.63],
[1975, 0.774],
[1976, 0.63],
[1977, 1.116],
[1978, 0.972],
[1979, 1.17],
[1980, 1.242],
[1981, 1.314],
[1982, 1.098],
[1983, 1.386],
[1984, 1.026],
[1985, 1.008],
[1986, 1.17],
[1987, 1.44],
[1988, 1.44],
[1989, 1.296],
[1990, 1.548],
[1991, 1.494],
[1992, 1.224],
[1993, 1.278],
[1994, 1.368],
[1995, 1.584],
[1996, 1.35],
[1997, 1.692],
[1998, 1.908],
[1999, 1.566],
[2000, 1.53],
[2001, 1.746],
[2002, 1.854],
[2003, 1.872],
[2004, 1.8],
[2005, 1.944],
[2006, 1.872],
[2007, 1.872],
[2008, 1.746],
[2009, 1.908],
[2010, 2.034],
[2011, 1.8],
[2012, 1.89],
[2013, 1.962],
[2014, 2.106],
[2015, 2.394]
]),
options: {
height: 313,
width: 302,
curveType: 'function',
colors: ['#333'],
legend: {
position: 'none'
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
},
baselineColor: 'transparent'
},
hAxis: {
format: 'none',
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
chartArea: {
left: 0,
top: 0,
width: '100%',
height: '100%'
},
backgroundColor: {
fill: 'transparent'
},
enableInteractivity: false
}
});
var areaChart = new google.visualization.ChartWrapper({
containerId: 'areachart_div',
chartType: 'AreaChart',
dataTable: google.visualization.arrayToDataTable([
['Year', 'Baseline', 'Coal Power Plants', 'Natural Gas', 'Waste', 'Farming', 'Factories', 'Buildings', 'Houses', 'Ships', 'Planes', 'Cars & Trucks', 'temp'],
['1900', undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 60.1],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
['2015', 56.5, 0.55, 0.30, 0.13, 0.28, 0.28, 0.32, 0.19, 0.04, 0.05, 0.3, 60.1],
['2020', 56.5, 0.59, 0.32, 0.13, 0.3, 0.3, 0.34, 0.2, 0.04, 0.05, 0.33, 60.1],
['2030', 56.5, 0.71, 0.37, 0.15, 0.34, 0.35, 0.41, 0.24, 0.05, 0.05, 0.39, 60.1],
['2040', 56.5, 0.83, 0.43, 0.17, 0.39, 0.42, 0.48, 0.29, 0.06, 0.06, 0.46, 60.1],
['2050', 56.5, 0.98, 0.5, 0.19, 0.45, 0.49, 0.57, 0.34, 0.07, 0.07, 0.54, 60.1],
['2060', 56.5, 1.14, 0.57, 0.21, 0.5, 0.57, 0.66, 0.39, 0.08, 0.09, 0.63, 60.1],
['2070', 56.5, 1.31, 0.63, 0.23, 0.55, 0.66, 0.76, 0.45, 0.09, 0.1, 0.72, 60.1],
['2080', 56.5, 1.47, 0.69, 0.24, 0.59, 0.74, 0.85, 0.51, 0.1, 0.11, 0.81, 60.1],
['2090', 56.5, 1.63, 0.74, 0.25, 0.62, 0.82, 0.94, 0.56, 0.11, 0.12, 0.9, 60.1],
['2100', 56.5, 1.77, 0.79, 0.26, 0.66, 0.89, 1.03, 0.61, 0.12, 0.14, 0.98, 60.1]
]),
options: {
isStacked: 'absolute',
height: 690,
width: 1340,
areaOpacity: 0.5,
legend: {
position: 'none'
},
series: {
11: {
type: 'line',
color: '#f23573',
lineDashStyle: [2, 2]
}
},
colors: ['#dcf8fa', '#b720dd', '#f6705a', '#f89b2d', '#fbcb0a', '#91d957', '#46d999', '#3cd6d8', '#60bcfd', '#96a6fb', '#4459c8', '#f23573'],
vAxis: {
minValue: 56.3,
ticks: [57, 58, 59, 60, 61, 62, 63, 64],
format: '##.#',
viewWindowMode: 'explicit',
viewWindow: {
max: 64,
min: 56.3
}
},
chartArea: {
left: 60,
top: 40,
width: '90%',
height: '88%'
},
enableInteractivity: false
}
});
lineChart.draw();
areaChart.draw();
});#areachart_container {
width: 90%;
height: 700px;
margin-left: 5.5em;
margin-right: auto;
margin-bottom: 3em;
}
#linechart_container {
position: absolute;
width: 302px;
height: 620px;
background-color: #DDD;
opacity: 0.8;
top:0px;
padding:0;
left: 156px;
padding-top: 1em;
}
#linechart_div {
position: absolute;
width: 263px;
/*height:315px;*/
/*top:380px;*/
height: 313px;
top: 382px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="areachart_container">
<div id="areachart_div"></div>
</div>
<div id="linechart_container">
<div id="linechart_div"></div>
</div>
注释：
1）您在hAxis上拥有的以下选项，
对离散轴无效（字符串值-> '1900', '2015', ...），
并且仅在连续轴上有效（数字，日期等...-> 1900, 2015）
参见discrete vs continuous axis
minValue: 1900,
ticks: [1900, 2015, 2020, 2030, 2040, 2050, 2060, 2070, 2080, 2090, 2100],
scaleType: 'linear'
2）建议使用css而非style属性（在面积图容器上）
请参见上面的代码段...
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？