json - Google 图表 - 来自本地 json 文件的数据 - 自定义工具提示
问题描述
我正在使用谷歌图表来创建 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 代码以使其工作。
也许有人可以帮我解决这个问题?
解决方案
首先,'visualization'
不是谷歌图表的有效版本号。
看起来这是旧的库加载器代码遗留下来的。
改用'current'
...
google.charts.load('current', { packages: ['corechart'] });
接下来,您需要将文件中的 html 复制到 json 中,
而不是尝试引用外部文件。
工具提示只需要一个 html 片段,而不是一个完整的文件。
要添加自定义工具提示,首先我们需要为工具提示添加列。
它应该是一个对象,如下...
{type: 'string', role: 'tooltip', p: {html: true}}
如果您想要两个"HKI"
&的工具提示"LTI"
,则
需要在每个列标题之后添加上面的工具提示列...
var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];
加载行时包含 html...
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
'<div>custom html goes here</div>',
value.LTI,
'<div>custom html goes here</div>'
]);
});
有关示例,请参见以下工作片段...
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = [
{ "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 },
];
var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
'<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.HKI + '</div></div>',
value.LTI,
'<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.LTI + '</div></div>'
]);
});
// 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.
}
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
编辑
如果您想将外部 html 文件显示为工具提示,隐藏标准工具提示
并显示外部文件
可能是有意义的'onmouseover'
有关示例,请参见以下工作片段...
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = [
{ "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 },
];
var channels = [['Channel', 'HKI (%)', 'LTI (%)']];
// 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: {trigger: 'none'},
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'));
var frame = document.getElementById('tooltip');
// hide external html on mouse out
google.visualization.events.addListener(chart, 'onmouseout', function () {
frame.className = 'hidden';
});
// display external html on mouse over
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
if (props.row === null) {
return;
}
var chartLayout = chart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('point#' + (props.column - 1) + '#' + props.row);
frame.style.left = bounds.left + 'px';
frame.style.top = bounds.top + 'px';
// replace this
frame.src = 'https://www.december.com/html/demo/hello.html';
// with this
//frame.src = '../' + figures.getColumnLabel(props.column) + (props.row + 1) + '.html';
frame.className = 'tooltip';
});
chart.draw(figures, options);
}
.hidden {
display: none;
visibility: hidden;
}
.tooltip {
background-color: #ffffff;
position: absolute;
height: 200px;
width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
<iframe class="hidden" id="tooltip"></iframe>
推荐阅读
- git - git 是否将无法访问的对象推送到远程
- confluence - Confluence - 搜索/过滤任务列表
- android - aar 不包括本地依赖项
- android - Dagger 2 DashboardMenuContract.OnGetAllDashboardMenuListener 不能在没有@Provides-annotated 方法的情况下提供
- scala - 具有多对多表的光滑嵌套外部连接
- azure - Azure 开发测试实验室:以编程方式设置强制项目
- c - 当输入数据超过原始分配的空间时,C 中更好的内存分配方法是什么?
- javascript - 导出数据表中流水线数据的问题
- ios - 我是否需要 iPhone 来构建 Xcode 并上传到 Appstore?
- typescript - 从库默认导出创建类型