动态条形图

时间:2014-04-24 08:48:38

标签: charts google-visualization bar-chart datapoint

基本上我有谷歌条形图。我要做的是在列上显示数据点值,如果列太短,则值应出现在列外的右侧。但如果足够长,它应该在里面。这是我的输出:

The numbers were cut off

我的代码:

function showIslandwideBarGraph(type,params2,params3,params4,params5) {

    var paramsArray = params4.split(",");
    var HDB_R1RM = Number(paramsArray[0]);
    var HDB_R2RM = Number(paramsArray[1]);
    var HDB_R3RM = Number(paramsArray[2]);
    var HDBOTHERS = Number(paramsArray[3]);

    var paramsArray2 = params5.split(",");
    var HDB_S12RM = Number(paramsArray2[0]);
    var HDB_S3RM = Number(paramsArray2[1]);
    var HDB_S4RM = Number(paramsArray2[2]);
    var HDB_S5EXECRM = Number(paramsArray2[3]);
    var HDB_SSARM = Number(paramsArray2[4]);
    var HDB_SHUDC = Number(paramsArray2[5]);

    clearChartContent();
    $(".chart").colorbox({ inline: true, open: true, width: 800, height: 600 });

    //var titleTwo = "Existing DUs for SubMTZ " + subzone;
    var titleTwo = "Existing DUs (Islandwide)";

    if(type == "PP"){
        titleTwo = "Additional DUs By 2016 (Islandwide)";
    }

    var dataTwo = google.visualization.arrayToDataTable([
    ['', 'HDB Rentals', 'HDB', 'EC', 'PTE'],
    ['1-RM Rental Flats', HDB_R1RM, 0, 0, 0],
    ['2-RM Rental Flats', HDB_R2RM, 0, 0, 0],
    ['3-RM Rental Flats', HDB_R3RM, 0, 0, 0],
    ['Other Rental Flats', HDBOTHERS, 0, 0, 0],
    ['1,2-RM HDB Flats', 0, HDB_S12RM, 0, 0],
    ['3-RM HDB Flats', 0, HDB_S3RM, 0, 0],
    ['4-RM HDB Flats', 0, HDB_S4RM, 0, 0],
    ['5-RM Executive', 0, HDB_S5EXECRM, 0, 0],
    ['Studio Apartment', 0, HDB_SSARM, 0, 0],
    ['HUDC', 0, HDB_SHUDC, 0, 0],
    ['EC', 0, 0, params3, 0],
    ['Private', 0, 0, 0, params2]
    ]);

    function getValueAt(column, dataTable, row) {
        return numberWithCommas(dataTable.getFormattedValue(row, column));
    };

    var view2 = new google.visualization.DataView(dataTwo);
    view2.setColumns([0, 1,
    {
        calc: getValueAt.bind(undefined, 1),
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    }, 2, {
        calc: getValueAt.bind(undefined, 2),
        sourceColumn: 2,
        type: "string",
        role: "annotation"
    }, 3, {
        calc: getValueAt.bind(undefined, 3),
        sourceColumn: 3,
        type: "string",
        role: "annotation"
    }, 4, {
        calc: getValueAt.bind(undefined, 4),
        sourceColumn: 4,
        type: "string",
        role: "annotation"
    }]);

    var optionsTwo = {
            annotations: {
                textStyle: {
                    color: 'black'
                }
            },
    title: titleTwo,
    vAxis: { title: '', titleTextStyle: { color: 'black'} },
    isStacked: true,
    width: 640,
    height: 480,
    colors: ['#CB00F5', '#ED2939', '#FFA500', '#0000FF']
    };

    var chartTwo = new google.visualization.BarChart(document.getElementById('pieOne'));
    chartTwo.draw(view2, optionsTwo);   
}

我想知道有没有办法从我的代码中获得所需的输出。

提前致谢。

0 个答案:

没有答案