Я использую диаграммы Google для создания диаграмм доступности каналов dvb-c.Данные для диаграмм красные из локального файла JSON.Графики работают очень хорошо, но я хотел бы добавить одну функцию, но мне нужно помочь с этим.
Функция, которую я хотел бы добавить, это настраиваемые всплывающие подсказки, но я не знаю, как это сделать.Я знаю, что должен добавить нужные данные в json, но, как я уже сказал, я не уверен, как это сделать и как мне изменить свой HTML-код, чтобы он работал.Я хочу, чтобы всплывающая подсказка читала локальный HTML-файл и отображала содержимое всплывающей подсказки.
Вот мой HTML-код:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart" style="width:3000px; height:600px;"></div>
</body>
<script>
// Visualization API with the 'corechart' package.
google.charts.load('visualization', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
$.ajax({
url: "./avail.json",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
var channels = [['Channel', 'HKI (%)', 'LTI (%)']]; // Define an array and assign columns for the chart.
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([value.Channel, value.HKI, value.LTI]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: { color: '#ff3385', lineWidth: 5, pointSize: 5 },
1: { color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: { "title": "Availability (%)", maxValue: 100 },
hAxis : { "title": "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true' }, slantedText:true, slantedTextAngle:45 },
chartArea:{left:70,top:50,right:40,width:"90%",height:"70%"},
tooltip: {isHtml: true, trigger: 'both'},
legend: { position: 'top', textStyle: { color: '#555', fontSize: 14} }
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(figures, options); // Draw the chart with Options.
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
</script>
</html>
Вот небольшой фрагмент моего текущего файла JSON:
[
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
]
Должен ли я добавить что-то подобное в json?
[
{ "Channel": "MTV Rocks", "HKI": 99.104700, <object data="./hki1.html"></object> "LTI": 98.760400, <object data="./lti1.html"></object> },
{ "Channel": "MTV3 HD", "HKI": 99.724600, <object data="./hki1.html"></object>"LTI": 99.724600, <object data="./lti1.html"></object> },
{ "Channel": "MTV3", "HKI": 100.000000, object data="./hki1.html"></object>"LTI": 100.000000, object data="./lti1.html"></object> },
]
Если это правильный способ изменить json, я понятия не имею, как изменить html-код, чтобы это работало.
Может быть, кто-то может помочь мне с этим?