如何在mvc中设置对谷歌图表的响应

时间:2014-09-08 10:48:34

标签: asp.net-mvc responsive-design

<script type="text/javascript">

// 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.


// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
$(document).ready(function () {
    google.setOnLoadCallback(drawChartCountry);
    $("a[href='#tab11']").on('shown.bs.tab', function (e) {
        google.load('visualization', '1', {
            packages: ['corechart'],
            callback: drawChartCountry
        });
    });
    $("a[href='#tab21']").on('shown.bs.tab', function (e) {
        google.load('visualization', '1', {
            packages: ['corechart'],
            callback: drawChartDevice
        });
    });
    $("a[href='#tab31']").on('shown.bs.tab', function (e) {
        google.load('visualization', '1', {
            packages: ['corechart'],
            callback: drawChartVersion
        });
    });

    function drawChartCountry() {
        $.post('/AppDashboard/GetCountryChart', {},
function (data) {
    var tdata = new google.visualization.DataTable();

    tdata.addColumn('string', 'Country');
    tdata.addColumn('number', 'No.of Users');

    for (var i = 0; i < data.length; i++) {
        tdata.addRow([data[i].Name, data[i].Value]);
    }

    var options = {
        title: "",
        is3D: true,
        //pieSliceText: 'label',
        pieStartAngle: 100,
        'width': 450,
        'height': 350
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_country'));
    chart.draw(tdata, options);
});
    }
    function drawChartDevice() {
        $.post('/AppDashboard/GetDeviceChart', {},
function (data) {
    var devicedata = new google.visualization.DataTable();

    devicedata.addColumn('string', 'Device');
    devicedata.addColumn('number', 'No.of Users');

    for (var i = 0; i < data.length; i++) {
        devicedata.addRow([data[i].Name, data[i].Value]);
    }

    var options = {
        title: "",
        is3D: true,
        pieStartAngle: 100,
        'width': 450,
        'height': 350
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart-device'));
    chart.draw(devicedata, options);
});
    }
    function drawChartVersion() {
        $.post('/AppDashboard/GetVersionChart', {},
function (data) {
    var versiondata = new google.visualization.DataTable();

    versiondata.addColumn('string', 'Version');
    versiondata.addColumn('number', 'No.of Users');

    for (var i = 0; i < data.length; i++) {
        versiondata.addRow([data[i].Name, data[i].Value]);
    }

    var options = {
        title: "",
        is3D: true,
        //pieSliceText: 'label',
        pieStartAngle: 100,
        'width': 450,
        'height': 350
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart-version'));
    chart.draw(versiondata, options);
});
    }
});

我已经在一个小部件中设置了谷歌图表,但是悲伤的部分是响应不起作用。当我将其调整为移动大小时,图表数据超出了我的小部件。请帮助我,如果你需要更多信息知道,谢谢事先:)

0 个答案:

没有答案