Question

我使用SHORT格式我的Google柱形图。这种格式非常有用，可以节省空间。但是，当用户将鼠标悬停在栏上时，我喜欢显示实际数字，如1180而不是1.2K。目前，当用户将鼠标悬停在栏上时，它会显示SHORT格式编号。是否可以在悬停时显示实际情况，但保持条形显示的SHORT格式？

提前致谢，

小提琴： https://jsfiddle.net/milacay/bq1srvdg/24/

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var array = [
        ["", "Today Hrs", "Goal Hrs"],
            ["Title1", 4553, 4151],
            ["Title2", 5560, 6150],
            ["Title3", 850, 920],
            ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatter = new google.visualization.NumberFormat({
            //prefix: '$',
            pattern : 'short'
        });
    formatter.format(data, 1);
    formatter.format(data, 2);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
                calc : "stringify",
                sourceColumn : 1,
                type : "string",
                role : "annotation"
            },
            2, {
                calc : mystringy.bind(undefined, 2),
                sourceColumn : 2,
                type : "string",
                role : "annotation"
            },
        ]);

    var options = {
        vAxis : {
            format : 'short',
            title : 'Progress To-Date',
            //viewWindowMode:'explicit',
            //viewWindow: {
            // max: 50,
            // min:0
            //},
            gridlines : {
                count : 8
            }
        },
        chartArea : {
            right : 0,
            width : "80%",
            height : "80%"
        },
        bar : {
            groupWidth : 70 // Set the width for each bar
        },
        annotations : { // Setting for font style format of the bar series...
            textStyle : {
                fontName : 'Times-Roman',
                fontSize : 10,
            }
        },
        width : 500,
        height : 500,
        bars : 'vertical',
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('classic_div'));
    //chart.draw(data, options);
    chart.draw(view, options);

}

function mystringy(column, data, row) {
    return ' ' + data.getFormattedValue(row, column);
}

Answer 1

工具提示默认显示格式化值所以使用悬停时想要的格式格式化数据表列

然后使用calc函数进行注释，使用不同的格式化程序来显示短格式

请参阅以下工作代码段...

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var array = [
      ["", "Today Hrs", "Goal Hrs"],
      ["Title1", 4553, 4151],
      ["Title2", 5560, 6150],
      ["Title3", 850, 920],
      ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatTooltip = new google.visualization.NumberFormat({
        pattern : '#,##0'
    });
    formatTooltip.format(data, 1);
    formatTooltip.format(data, 2);
    var formatShort = new google.visualization.NumberFormat({
        pattern : 'short'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 1));
            },
            type : "string",
            role : "annotation"
        },
        2, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 2));
            },
            type : "string",
            role : "annotation"
        },
    ]);

    var options = {
        vAxis : {
            format : 'short',
            title : 'Progress To-Date',
            //viewWindowMode:'explicit',
            //viewWindow: {
            // max: 50,
            // min:0
            //},
            gridlines : {
                count : 8
            }
        },
        chartArea : {
            right : 0,
            width : "80%",
            height : "80%"
        },
        bar : {
            groupWidth : 70 // Set the width for each bar
        },
        annotations : { // Setting for font style format of the bar series...
            textStyle : {
                fontName : 'Times-Roman',
                fontSize : 10,
            }
        },
        width : 500,
        height : 500,
        bars : 'vertical',
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('classic_div'));
    chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="classic_div"></div>

Google图表 - 悬停栏时显示实际数字

1 个答案: