2013-07-23 2 views
1

Как использовать ChartWrapper и форматировщик для добавления суффикса в всплывающую подсказку в линейных/гистограммах? Это мой код для ChartWrapperGoogle Chart: ChartWrapper и Formatters (NumberFormat)

function drawChartb() { 

    var wrapper = new google.visualization.ChartWrapper({ 
    chartType: 'LineChart', 
    dataTable: [['Person', 'Score'], [1, .50], [2, .25]], 
    options: {'legend': 'bottom', 'colors': ['#D70005'], 'chartArea': {left: 40, top: 10, width: 450}, 'vAxis': {format: '#,###%', 'viewWindow': {max: 1.05, min: .2}}, 'pointSize': 6}, 
    containerId: 'chart_div' 
    }); 

    wrapper.draw(); 
} 

Это, как я сделал это без использования chartwrapper.

// set tooltip as percentage 
var formatter = new google.visualization.NumberFormat({ 
pattern: '#%', 
fractionDigits: 2 
}); 
formatter.format(data, 1); 

Благодаря

ответ

6

Вы можете определить свои данные за пределы оболочки, используют formatter на нем, а затем установите DataTable равным этому источнику данных:

function drawVisualization() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Person', 'Score'], [1, .50], [2, .25] 
    ]); 

    // set tooltip as percentage 
    var formatter = new google.visualization.NumberFormat({ 
    pattern: '#%', 
    fractionDigits: 2 
    }); 
    formatter.format(data, 1); 

    var wrapper = new google.visualization.ChartWrapper({ 
    chartType: 'LineChart', 
    dataTable: data, 
    options: {'legend': 'bottom', 'colors': ['#D70005'], 'chartArea': {left: 40, top: 10, width: 450}, 'vAxis': {format: '#,###%', 'viewWindow': {max: 1.05, min: .2}}, 'pointSize': 6}, 
    containerId: 'visualization' 
    }); 


    wrapper.draw(); 
} 

Результат:

Sample Image

+0

Отличная идея, использующая комбинацию arra yToDataTable и ChartWrapper. благодаря –

Смежные вопросы