0
私は1つのGoogleチャートをカスタマイズしようとしています。問題は、私のツールチップがテーブルの上にレンダリングされているのではなく、テーブルの下にレンダリングされていることです。これをどのように修正するのですか？ここでGoogleChartsツールチップの下に
は構成です：
<!-- <div id="chart_AreaChart" class="chart"> </div> -->
<div id="chart_ColumnChart" class="chart"> </div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script>
<script type="text/javascript">
function getCategoryName(category){
var categoryMap = {
1:'Американски колеж',
2:'Езикови гимназии',
3:'Специализирани (СМГ, НПМГ и др)',
4:'Частни гимназии',
5:'С усилено изучаване на език',
6:'Чужбина'
};
return categoryMap[category];
}
function createTooltipHTML(year, category, value){
console.log('createTooltipHTML(' + year + ', ' + category + ', ' + value + ');');
return '<div style="padding: 5px;">' +
'<table style="text-align: center; padding: 7px; background: white;">' +
'<tr><td>Випуск - ' + year + 'г -</td></tr>' +
'<tr><td>' + getCategoryName(category) + '</td></tr>' +
'<tr><td>' + value + '%</td></tr>' +
'</table>'+
'</div>';
}
function getDataTable(){
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Випуск');
dataTable.addColumn('number', getCategoryName(1));
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', getCategoryName(2));
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', getCategoryName(3));
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', getCategoryName(4));
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', getCategoryName(5));
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', getCategoryName(6));
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addRows([
['96', 20, createTooltipHTML(96, 1, 20) , 33.5, createTooltipHTML(96, 2, 33.5) , 13 , createTooltipHTML(96, 3, 13), 2 , createTooltipHTML(96, 4, 2) , 4 , createTooltipHTML(96, 5, 4) , 7, createTooltipHTML(96, 6, 7)]
]);
return dataTable;
}
function draw_ColumnChart() {
// alert("ColumnChart");
var tableData = [
['Випуск',
getCategoryName(1), {'type': 'string', 'role': 'tooltip', 'property': {'html': true}},
getCategoryName(2), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
getCategoryName(3), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
getCategoryName(4), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
getCategoryName(5), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
getCategoryName(6), {'type': 'string', 'role': 'tooltip', 'p': {'html': true}},
],
['96', 20, createTooltipHTML(96, 1, 20) , 33.5, createTooltipHTML(96, 2, 33.5) , 13 , createTooltipHTML(96, 3, 13), 2 , createTooltipHTML(96, 4, 2) , 4 , createTooltipHTML(96, 5, 4) , 7, createTooltipHTML(96, 6, 7)],
// ['97', 28 , 28 , 9 , 16 , 19 , 0],
// ['98', 42 , 18 , 6 , 34 , 0 , 0],
// ['99', 18 , 36 , 0 , 36 , 10 , 0],
// ['00', 32 ,32 , 9 , 12 , 15 , 0 ],
// ['01', 6 , 33 , 14 , 35 , 6 , 6 ],
// ['02', 15 , 45 , 10 , 15 , 10 , 5],
// ['03', 18 , 53 , 0 , 23 , 0 , 6 ],
// ['04', 21 , 47 , 0 , 16 , 16 , 0],
// ['05', 30, 10 , 0 , 30 , 25 , 5],
// ['06', 30 , 48 , 16 , 6 , 0 , 0],
// ['07', 29, 25 , 4 , 25 , 0 , 17],
// ['08', 31 , 28 , 10 , 17 , 4 , 10],
// ['09', 44 , 6 , 22 , 20 , 0 , 8],
// ['10', 44 , 6 , 22 , 20 , 0 , 8],
// ['11', 54 , 26 , 0 , 11 , 0 , 9 ],
// ['12', 45 , 34 , 5 , 5 , 2 , 9 ],
// ['13', 58 , 29 , 3 , 3 , 3 , 4 ],
// ['14', 42 , 42 , 8 , 2 , 4 , 2 ],
];
// put columns in correct order
for (var rowIndex = 0 ; rowIndex < tableData.length ; rowIndex ++){
var row = tableData[rowIndex];
var temp = row[1];
row[1] = row[6];
row[6] = temp;
temp = row[2];
row[2] = row[5];
row[5] = temp;
temp = row[3];
row[3] = row[4];
row[4] = temp;
}
// var data_ColumnChart = google.visualization.arrayToDataTable(tableData);
var data_ColumnChart = getDataTable();
var options_ColumnChart = {
title:'Реализация по години в проценти',
titleTextStyle: {
fontSize: 28,
bold: false,
},
height: 600,
hAxis: {
title:'Випуск',
minValue: 0
},
vAxis: {
title: 'Процент от всички завършващи'
},
legend: {
position: 'right'
},
bar: {
groupWidth: '75%'
},
isStacked: 'percent',
tooltip: { isHtml: true },
series: {
0:{color:'#13AAAD'},
1:{color:'#13A45D'},
2:{color:'#BFEAA6'},
3:{color:'#FEF10C'},
4:{color:'#F8A51C'},
5:{color:'#F88224'},
}
};
var ColumnChart = new google.visualization.ColumnChart(document.getElementById('chart_ColumnChart'));
ColumnChart.draw(data_ColumnChart, options_ColumnChart);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(draw_ColumnChart);
window.onresize = function(event) {
draw_ColumnChar();
// draw_AreaChart();
};
// Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //
</script>
、ここでは結果である：
これはすべてのコードですか？コンテナが表示される前にグラフが描画されている可能性はありますか？いつでも隠れているコンテナです...？ – WhiteHat
私はこれをWordPressサイトでインポートします... VisualComposerを使用して、 "RawJS"フィールドを使用してコードを入力します。あなたのHTMLに追加されているもの（45.5％）が見えますか？どうすれば削除できますか？ – mp3por
私は問題がどこにあるのかわかりました...何らかの理由でGoogleのCSSが読み込まれたり挿入されたりしていません。 ??すべてのアイデア – mp3por