我正在尝试使Google图表响应,但渲染的输出如下所示: !日期显示不正确1 我可以看到图形重新调整大小但图形内容可能无法正常工作,图表内容JSON数据工作正常,您可以看到附加了此json api的示例数据。
我需要一些帮助才能使文字正确显示
这是代码
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://m.reporting.hero-leads.com/graph/campaign/0/0/4",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
// Set chart options
var options = {
'title':'Leads',
'vAxis': {title: '# Leads', titleTextStyle: {color: 'black'}},
'hAxis': {title: 'Days', titleTextStyle: {color: 'black'},showTextEvery:1, slantedText:true, slantedTextAngle:90, minTextSpacing:1, textStyle:{color: '#333333', fontSize: 14},
'width':(2*(window.innerWidth))/3,
'height':(2*(window.innerHeight))/3,
'legend':'bottom',
'legendPosition':'sameRow'},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '30%' },
colors: ['e46c0a','7f7f7f'],
isStacked: true,
backgroundColor: { fill:'transparent' }
};
// Instantiate and draw our chart, passing in some options.
function resize () {
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
}
</script>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
答案 0 :(得分:0)
尝试使用Windows resize事件
我为半圆形饼图做了这个。
参考此
http://www.codeproject.com/Tips/869927/Responsive-Semicircular-doughnut-Chart-Using-Googl
如果您无法理解,请参阅以下代码。
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(initChartExpertBottom);
$(window).on("resize", function (event) {
initChartExpertBottom();
});
function initChartExpertBottom() {
var options = {
legend:'none',
width: '100%',
height: '100%',
tooltip: { isHtml: true },
chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"},
colors: ['#7CB5EC', '#5C5C61','#16c104'],
pieHole: 0.50,
pieStartAngle: -90,
is3D: false,
pieSliceText: 'none',
};
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
["Hide" , (11+2)] //addition of value of all elements
]);
drawChartExpertBottom(data, options);
}
function drawChartExpertBottom(data, options) {
var tooltip = [
Math.round((11/(11+2))*100) + "%",
Math.round((2/(11+2))*100)+ "%",
"Hiii3",
];
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
var sliceid = 0;
function eventHandler(e){
chart.setSelection([e]);
try {
selection = chart.getSelection();
sliceid = selection[0].row;
}
catch(err) {
;
}
$(".google-visualization-tooltip-item-list li:eq(0)").css("font-weight", "bold");
$(".google-visualization-tooltip-item-list li:eq(1)").html(tooltip[sliceid]).css("font-family", "Arial");
}
google.visualization.events.addListener(chart, 'onmousedown', eventHandler);
google.visualization.events.addListener(chart, 'onmouseover', eventHandler);
chart.draw(data, options);
}
</script>
以上脚本的HTML
<div id="piechart"></div>
以上代码段的Css
<style>
#piechart {
top: 0;
left: 0;
width:100%;
height:100%;
}
.google-visualization-tooltip{
display:table;
}
g{
cursor:pointer;
}
</style>