我使用谷歌图表仪表板来显示折线图,我想在运行时控制显示的元素.例如:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5 ],
['B', 2, 0.5, 1 ],
['C', 4, 1, 0.5 ],
['D', 8, 0.5, 1 ],
['E', 7, 1, 0.5 ],
['F', 7, 0.5, 1 ],
['G', 8, 1, 0.5 ],
['H', 4, 0.5, 1 ],
['I', 2, 1, 0.5 ],
['J', 3.5, 0.5, 1 ],
['K', 3, 1, 0.5 ],
['L', 3.5, 0.5, 1 …
Run Code Online (Sandbox Code Playgroud) 在我的网页上,我有一个谷歌地图,以及三个图表.当页面加载时,地图很好,但图表要么不加载,要么只加载一两个.继续收到错误TypeError:google.visualization.DataTable不是构造函数.
function load() {
//map object
var MY_MAP = new google.maps.Map(document.getElementById("map"), {
center: {lat: 54.870902, lng: -6.300565},
zoom: 14
});
//call to get and process data
downloadUrl("Map.php", processXML);
}
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawAltitudeChart());
google.setOnLoadCallback(drawDisplacementChart());
google.setOnLoadCallback(drawDistanceChart());
function drawAltitudeChart(){
//console.log('hello');
var graph = [];
downloadUrl("Map.php", function (data){
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var dataTable = new google.visualization.DataTable(); …
Run Code Online (Sandbox Code Playgroud) 如何更改饼图切片生成的顺序?这是我的代码.
var DEFAULT_PIE_CHART_OPTIONS = {
theme: 'material',
titleTextStyle: { fontSize: 12 },
is3D: false,
pieSliceText: 'label',
colors: ['#8E142E','#C3CA21','#8A972B','#6FF522','#167D13'],
fontSize: 12,
pieHole: 0.6,
pieStartAngle: 180,
height: 600,
chartArea: { width: '100%', height: '100%', left: 0, top: 100 },
legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } }
};
var chartOptions = DEFAULT_PIE_CHART_OPTIONS;
chartOptions.colors = null;
var chartOverallPmmLevelCalculated = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chartOverallPmmLevelCalculatedHtml',
options: chartOptions
});
function drawPieChart() {
var responseDataTable = levelTableChart.getDataTable(); …
Run Code Online (Sandbox Code Playgroud) 我有一张Sankey图表.它有2个部分 - 蔬菜和Frutis.我不想要蔬菜触手.
那可能吗?
这是截图:
这是我目前的Sankey Chart代码:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
.my-padding {
margin-top: 50px;
margin-bottom: 50px;
margin-right:50px;
}
</style>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Vegetables 70.2%',, 70.2],
[ 'Fruits 29.8%', 'Orange 9%', 9 ],
[ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
[ 'Fruits 29.8%', 'Banana 7.9%', 7.9 ],
[ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],
[ 'Orange 9%', …
Run Code Online (Sandbox Code Playgroud) 工具提示会在某些点被截止(底部会被切断).
我该如何解决这个问题?
以下是目前的选择......
chart.draw(data, {
width: 275,
height: 75,
legend:'none',
gridlineColor:'white',
pointSize:2,
chartArea:{left:0},
chartArea:{width:275},
colors:['red','green', 'blue']});
Run Code Online (Sandbox Code Playgroud) 这让我疯了.我无法让传说完全移动.这将生成一个图表,其右侧是默认位置的图例.
我显然已将传说位置声明为"底部",但它不起作用.然而,这正是文档所说的.
google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
series: {
0: {axis: 'Quotes'},
1: {axis: 'Percent'}
},
axes: {
y: {
Quotes: {label: …
Run Code Online (Sandbox Code Playgroud)我在我的页面中使用谷歌图表,但图例文字是重叠的,如图所示:
这是我的代码:
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < dados.length; i++) {
var temp = new Date(dados[i].DT_FIM);
dataTable.addRow([new Date(temp.getFullYear(), temp.getMonth())
,dados[i].TON_HORA
,dados[i].TON_HORA_EQUIV
,dados[i].PES_LIQUI_UNMET]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { …
Run Code Online (Sandbox Code Playgroud)刚刚开始使用Google图表,我正在尝试创建一个填充可用空间的折线图.似乎图表被锁定在某个宽高比中,但无论我为图表和图表div元素更改高度和宽度属性,结果都与我的尺寸不匹配.
谷歌图表是固定的,还是我缺少的覆盖或宽高比选项?
你可以在这里找到一个例子:
http://www.walkingcarpet.net/graphs/unemployment-rate/
谢谢!
我有一个 ScatterChart,我需要在其中绘制一条对角线(函数 y=x)作为视觉辅助。是否可以 ?如果是这样,我该怎么办?
首先,对这个例子大喊大叫:https : //www.c-sharpcorner.com/UploadFile/ca9151/google-charts-api-using-database-in-Asp-Net/ 如果你想要一个简单的演练构建谷歌图表,那就完美了。
在说......在那个例子中,在我的项目中......我无法让图表从指定部分的左侧开始。它不断缩进。当我隐藏轴标签时,情况会更糟,因为由于缺少单词,空间会变得更大。
有谁知道如何让它们占据 100% 的宽度?(在图像中,我希望图表从红线开始,一直到 div 的另一侧)
提前致谢。