2016-04-25 10 views
1

ここをクリックしてください:https://jsfiddle.net/1cLpukxx/1/Google視覚化(グラフ)API:凡例で使用する軸を変更しますか?

ご覧のとおり、凡例はDensityの値です。私は、彼らがチャートにある色で、伝説の要素になりたい

legend: { position: "right" } 

:私は私がやっているすべてはこのためであることだと思います。

私はこれが簡単だと思いますが、私はそれをX軸の凡例をサイドレジェンドとして使っていませんでした。 >'none'

-

答えて

1

例で使用style column

位置に設定されている理由である伝説を、上書きされます...私は私が検索するかわからないされているので、このように感じるが、私は脱線します

次の例のように、行を列に変更することもできます。
これにより、別のシリーズが作成され、構成オプションでcolorsの配列を設定することができます。
ただし、これにより列の間隔などの他の問題が発生します。

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ["Metal", "Copper", "Silver", "Gold", "Platinum"], 
 
    ["Copper", 8.94, null, null, null], 
 
    ["Silver", null, 10.49, null, null], 
 
    ["Gold", null, null, 19.30, null], 
 
    ["Platinum", null, null, null, 21.45] 
 
    ]); 
 

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

 
    var options = { 
 
    title: "Density of Precious Metals, in g/cm^3", 
 
    width: 600, 
 
    height: 400, 
 
    legend: {alignment: "right"}, 
 
    colors: ['#b87333', 'silver', 'gold', '#e5e4e2'] 
 
    }; 
 
    var chart = new google.visualization.ColumnChart(document.getElementById("chart_div")); 
 
    chart.draw(view, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+1

ああ、私は行くために必要な場所私を得ています!私はデータテーブルを次のように変更しました: 'var data = google.visualization.arrayToDataTable( [" Metal "、" Copper "、" Silver "、" Gold "、" Platinum "]、 [" Metal " 8.94、10.49、19.30、21.45] ]); それは私の目的のために働いた。 –

+0

よろしく!それはもっと意味をなさない... – WhiteHat

関連する問題