响应谷歌图

我试图让谷歌图表响应，但呈现的输出如下所示：日期显示不正确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>

来源

2014-09-13 Mohammad Abu Musa

这不是调整图表的问题 - 你hAxis选项强制图表绘制足够接近标签当图表的宽度变得足够窄时它们重叠在一起。使用较小的字体大小或删除'showTextEvery'选项。 – asgallant 2014-09-16 00:14:59

尝试使用Windows调整事件

我这样做了半圆形的饼图。

请参阅本

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>

来源

2015-01-27 13:28:43

回答

相关问题