7

私はそれに関連付けられたデータセットはnullを返し、無効な色の凡例を示すべきである伝説をクリックすると、私は)Googleの縦棒グラフのカスタマイズ伝説

1以下のように私のコラムチャートAPIをカスタマイズしたいと思います。私のコードは以下の通りです。このため

function drawVisualization() { 
    // Create and populate the data table. 
    var chart_div  = document.getElementById('visualization2'); 

    var data2   = google.visualization.arrayToDataTable([["Sections","Client Scored",{ role: "style" },"Client Confidence",{ role: "style" },"Average Mark",{ role: "style" },"Average Confidence",{ role: "style" }],["Set 1",90,"opacity: 1",95,"opacity: 0.5",78,"opacity: 1",69,"opacity: 0.5"],["Set 2",65,"opacity: 1",73,"opacity: 0.5",99,"opacity: 1",99,"opacity: 0.5"]]); 
    var options = { 
     title:"Understanding", 
     width:'100%', height:600,seriesType: "bars" 
     ,series:{1: {type: "line",pointSize: 10,lineWidth :0},3: {type: "line",pointSize: 10,lineWidth :0}} 
     ,colors: ['#fafe14','#fafe14','#05afed','#05afed'] 
     ,vAxis: {title: "%Score",format: '##', minValue: '1', maxValue: '8'},  
     hAxis: {title: "",slantedText: true,slantedTextAngle:60, maxTextLines: 5, maxAlternation: 10 }, 
     chartArea: {height: '60%',top:10} 
     };  
    var chart   = new google.visualization.ColumnChart(chart_div); 

    chart.draw(data2, options); 

    } 

、IはhideColumns機能を試み、それが働いていたが、問題は、凡例もデータセットにフェードアウト及びIは、第二の列を削除した場合、第3列は第二になり、4 3と5になることです2)私の第二の質問は、列1と列3は、以下に示すように線幅ゼロの行です。

enter image description here

私はあなたがしようとしている正確にあなたの質問の最初の部分を理解していた場合 enter image description here

答えて

1

下に示すように、最初のバーの正確な真ん中にこれを移動する方法はありますDataTableから列を削除せずに列を非表示にします。

DataTableの列が描画されたグラフに表示されないようにするには、列の役割をグラフに表示されないものに変更します。

たとえば、列のannotationTextロールは、その前にある注釈列に適用されますが、その前に注釈列がない場合、annotationText列は単に無視されます。

data_table.setColumnProperty(2,'role','annotationText'); 

をそして、あなたは再び列を表示したい場合は、単にデータ

data_table.setColumnProperty(2,'role','data'); 
に戻す役割を変更します

ですから、2列を非表示にする場合、次のコードスニペットは、そうでしょう

関連する問題