2017-07-31 6 views
1

データ行の値を使用して定義済みの凡例があります。データ行の値は変更できないため、凡例の値を書式設定する必要があります。たとえば、伝説[A、S、T、V]を[AT & T、Sprint、T-Mobile、Verizon]にする必要があります。ダニを再フォーマットすることはできますが、伝説を再フォーマットする方法はありますか?Google Chartsで凡例をフォーマットすることはできますか?

ここに私のデータのサンプルの:

[ID、キャリアA、キャリアB、キャリア、量]、

[1、S、V、A、36]、

[2、V、A、S、15]、

[3、A、V、T、22]、

[4、S、A、V、48]

データはバブルチャート形式です。

+0

あなたは伝説を変えようとしましたか? –

+0

[Googleの折れ線グラフ/ Googleの折れ線グラフの凡例を作成する方法](https://stackoverflow.com/questions/35987014/how-to-write-your-own-custom-legends- google-line-chart-go-line-chart-le) – juvian

+0

@WhiteHatサンプルデータで質問を更新しました – user2896120

答えて

1

あなたは...それぞれの名前

使用DataView方法setColumns

作業スニペット以下の参照に値を変換するために、計算された列の

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['table'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['ID', 'Carrier A', 'Carrier B', 'Carrier C', 'Amount'], 
 
    [1, 'S', 'V', 'A', 36], 
 
    [2, 'V', 'A', 'S', 15], 
 
    [3, 'A', 'V', 'T', 22], 
 
    [4, 'S', 'A', 'V', 48] 
 
    ]); 
 

 
    var dataView = new google.visualization.DataView(data); 
 
    dataView.setColumns([0, { 
 
    calc: function (dt, row) { 
 
     return getCarrierName(dt.getValue(row, 1)); 
 
    }, 
 
    type: 'string', 
 
    label: data.getColumnLabel(1) 
 
    }, { 
 
    calc: function (dt, row) { 
 
     return getCarrierName(dt.getValue(row, 2)); 
 
    }, 
 
    type: 'string', 
 
    label: data.getColumnLabel(2) 
 
    }, { 
 
    calc: function (dt, row) { 
 
     return getCarrierName(dt.getValue(row, 3)); 
 
    }, 
 
    type: 'string', 
 
    label: data.getColumnLabel(3) 
 
    }, 4]); 
 

 
    function getCarrierName(abbr) { 
 
    var name; 
 

 
    switch (abbr) { 
 
     case 'A': 
 
     name = 'AT&T'; 
 
     break; 
 

 
     case 'S': 
 
     name = 'Sprint'; 
 
     break; 
 

 
     case 'T': 
 
     name = 'T-Mobile'; 
 
     break; 
 

 
     case 'V': 
 
     name = 'Verizon'; 
 
     break; 
 

 
     default: 
 
     name = ''; 
 
    } 
 

 
    return name; 
 
    } 
 

 
    var chart = new google.visualization.Table(document.getElementById('chart_div')); 
 
    chart.draw(dataView); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

DataViewを使用することができます

+0

この回答はとても良いですが、私のデータのフォーマットは次のようなものです:[ID、キャリアA B、キャリア、量]、[1、S、V、V、36]、[2、V、A、A]私はバブルチャートをフォーマットしようとしています – user2896120

+0

上記の答えが変更されました... – WhiteHat

関連する問題