0
Googleタイムラインチャートのjavascriptコードがありますが、エラーを修正できません。
これ何のチャートを仮定すると、次のようになります。GoogleタイムラインチャートのJavascriptコードにエラーが含まれています
- バーの色はもちろん依存する（例えばIT）
- ツールチップは
- HAxisが
- HAxisがされるチャートの上に配置されたリンクを持っています
私は1-3が良いと思っていますが、@ WhiteHatの提案から＃4を追加したときには、それが含まれています（例：10月6日から1週）。エラーです（下記のスニペットを参照してください）。
私はそれを無駄に修正しようとしました。
私のjavascriptは知識が限られており、初心者レベルです。
私はこの1つで私を助けてくれて、親切に私が間違っているところで私に説明してください。
アドバイスや提案は大変ありがとうございます。
ありがとうございます！
google.charts.load("current", {packages:["timeline"], callback: drawChart});
function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
// hAxis put on top
google.visualization.events.addListener(chart, 'ready', afterDraw);
// Link in tooltip
google.visualization.events.addListener(chart, 'select', function(e) {
var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
if (chart.ttclone) {
chart.ttclone.parentNode.removeChild(chart.ttclone)
}
chart.ttclone = tooltip.cloneNode(true);
chart.ttclone.setAttribute('clone', true);
chart.ttclone.style.pointerEvents = 'auto';
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
// for colorMap
dataTable.addColumn({ type: 'string', id: 'Course' });
dataTable.addColumn({ type: 'string', id: 'Subject' });
dataTable.addColumn({ type: 'string', id: 'ToolTip', role: 'tooltip', p:{html:true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
\t
\t // Timeline Start
\t ['Student 1', 'ENGR', 'Trigonometry', '<a href="link_to_subj_desc" target="_blank">Trigonometry</a>', new Date(2016, 9, 30), new Date(2016, 10, 06)],
\t ['Student 2', 'IT', 'DB Management', '<a href="link_to_subj_desc" target="_blank">DB Management</a>', new Date(2016, 9, 30), new Date(2016, 10, 13)],
\t ['Student 3', 'CS', 'Introduction to Programming', '<a href="link_to_subj_desc" target="_blank">Introduction to Programming</a>', new Date(2016, 9, 30), new Date(2016, 10, 27)],
]);
\t
var colors = [];
var colorMap = {
\t ENGR: \t '#2ECC71', \t // Green
\t IT: \t '#E67E22', \t // Brown
\t CS: \t '#9B59B6', \t // Violet
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
\t colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
\t
var options = {
\t timeline: {
\t \t groupByRowLabel: true,
\t \t rowLabelStyle: {
\t \t \t fontName: 'Century Gothic',
\t \t \t fontSize: 14,
\t \t \t color: '#333333',
\t \t \t bold: 'true',
\t \t },
\t \t barLabelStyle: {
\t \t \t fontName: 'Century Gothic',
fontSize: 11,
},
showRowLabels: true,
showBarLabels: true,
},
hAxis: {
minValue: new Date(2016, 9, 30),
maxValue: new Date(2017, 9, 28),
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: colors,
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);
// Change HAxis labels to Week
google.visualization.events.addListener(chart, 'ready', function() {
var rowIndex = 0; // data table row index
var weekLabel = null; // clone of text node - keep font settings, y-coord, etc...
// remove haxis labels
var labels = container.getElementsByTagName('text');
while (labels.length > dataTable.getNumberOfRows()) {
// ignore "category" labels
if (dataTable.getFilteredRows([{column: 5, value: labels[labels.length - 1].innerHTML}]).length === 0) {
if (weekLabel === null) {
weekLabel = labels[labels.length - 1].cloneNode(true);
}
labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
}
}
// use timeline bars to find x coordinate for week labels
rowIndex = 0;
var svgParent = container.getElementsByTagName('svg')[0];
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
var bounds; // bounding box of text element
// ignore rect if not a timeline bar
if (parseFloat(bar.getAttribute('x')) > 0) {
weekLabel = weekLabel.cloneNode(true);
weekLabel.innerHTML = 'WW 70' + (rowIndex + 1);
svgParent.appendChild(weekLabel);
bounds = weekLabel.getBBox();
weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
rowIndex++;
}
});
});
\t
\t chart.draw(
\t \t view,
\t \t options,
\t \t dataTable, {
\t \t \t tooltip: {
\t \t \t \t isHtml: true,
\t \t \t },
\t \t \t timeline: {
\t \t \t \t showBarLabels: false,
\t \t \t }
\t });
}
// hAxis put on top
function afterDraw() {
\t var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
\t document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
\t document.getElementsByTagName("svg")[0].style.overflow = 'visible';
\t var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
\t g.setAttribute('transform','translate(0,-'+height+')');
\t g = null;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
こんにちは@WhiteHatを、それはあなたが前に私を提供してきたし、それが正常に動作しているものです。しかし問題はそれを一番上に置いて、それが私が問題を抱えているところです。それは可能ですか、あなたはこの1つで私を助けてくれますか？ – bbb
こんにちは、この人に私に助言できる人はいますか？前もって感謝します！ – bbb