我在我的页面中使用谷歌图表,但图例文字是重叠的,如图所示:
这是我的代码:
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: { fontSize: 14 } },
width: 1200,
height: 500
};
var chart = new google.visualization.ComboChart(document.getElementById("div-Equipamento-Produtividade"));
chart.draw(dataTable, options);
我的图表在bootstrap tab nav上:
我试图将位置改为"底部",但问题仍在继续
我错了什么?
检查隐藏时是否正在绘制图表
请参阅以下代码段,默认情况下隐藏图表,
然后在图表的'ready'
事件触发后显示
注意,它产生与问题中发布的结果相同的结果......
google.charts.load('current', {
callback: function () {
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 < 12; i++) {
var temp = new Date();
dataTable.addRow([new Date(temp.getFullYear(), i)
,(i + 2) * 6
,(i + 1) * 12
,(i + 0) * 18]);
}
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: { fontSize: 14 } },
width: 1200,
height: 500
};
var container = document.getElementById("div-Equipamento-Produtividade");
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
container.style.display = null;
});
chart.draw(dataTable, options);
},
packages: ['corechart']
});