javascript Google可视化折线图无法显示自定义点
我试图显示一个折线图,显示两队在每一场比赛中的得分
function drawChart() {
season = document.getElementById('ipl_Seasons');
var jsonData = $.ajax({
url: "******************************=" + season.value,
dataType: "json",
crossDomain: true,
async: false
}).responseText;
var parsed = JSON.parse(jsonData);
var arr = [];
var validation = {
isNumber: function (str) {
var pattern = new RegExp('^[0-9]+$');
return pattern.test(str); // returns a boolean
}
};
for (var x in parsed) {
arr.push(parsed[x]);
}
var elementById = document.getElementById('matches_Number');
if (elementById !== null && validation.isNumber(elementById.value)) {
var matchByIDandSeason = elementById.value;
var finalMatch = arr[parseInt(matchByIDandSeason) - 1];
var mapOfOversAndRunsForFirstInnings = {};
var mapOfOversAndRunsForSecondInnings = {};
var matchDetails = finalMatch.matchDetails;
var perOverRuns = 0;
for (var i = 0; i < matchDetails.length; i++) {
if (matchDetails[i].inning === 1) {
if(matchDetails[i].over in mapOfOversAndRunsForFirstInnings){
mapOfOversAndRunsForFirstInnings[matchDetails[i].over] = parseInt(mapOfOversAndRunsForFirstInnings
[matchDetails[i].over])+matchDetails[i].total_runs;
}else {
perOverRuns = 0;
perOverRuns = matchDetails[i].total_runs + perOverRuns;
mapOfOversAndRunsForFirstInnings[matchDetails[i].over] = perOverRuns;
}
} else {
if(matchDetails[i].over in mapOfOversAndRunsForSecondInnings){
mapOfOversAndRunsForSecondInnings[matchDetails[i].over] = parseInt(mapOfOversAndRunsForSecondInnings
[matchDetails[i].over])+matchDetails[i].total_runs;
}else {
perOverRuns = 0;
perOverRuns = matchDetails[i].total_runs + perOverRuns;
mapOfOversAndRunsForSecondInnings[matchDetails[i].over] = perOverRuns;
}
}
}
var dataArray = [['Overs', finalMatch.team1, finalMatch.team2]];
var firstInningRun = 0;
var secondInningRun = 0;
var chartDataForTeam1 = [];
var chartDataForTeam2 = [];
for (var overs = 1; overs <= 20; overs++) {
chartDataForTeam1.push(mapOfOversAndRunsForFirstInnings[overs]);
chartDataForTeam2.push(mapOfOversAndRunsForSecondInnings[overs]);
dataArray.push([overs, 0, 0]);
}
var materialOptions = {
chart: {
title: 'Cricket Performance'
},
width: 900,
height: 500,
hAxis: {
gridlines: {count: 10},
minValue : 1,
maxValue : 20,
title: 'Overs'
},
vAxis: {
minValue : 1,
title: 'Runs'
},
animation: { duration: 250 }
};
var data = new google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.ColumnChart(document.getElementById('columns_chart_div'));
var team1Index = 0;
var team2Index = 0;
var drawChart = function() {
if (team1Index < 20) {
data.setValue(team1Index, 1, chartDataForTeam1[team1Index++]);
chart.draw(data, materialOptions);
}
if(team2Index < 20){
data.setValue(team2Index, 2, chartDataForTeam2[team2Index++]);
chart.draw(data, materialOptions);
}
};
google.visualization.events.addListener(chart, 'animationfinish', drawChart);
chart.draw(data, materialOptions);
drawChart();
}
这就是它的结果。但是默认的点设置是显示来自x和y坐标的数据。我想展示第三个数据系列,在绘制的折线图中,每个局的边线都会下降,而不是得分。就像他们在板球图上所显示的那样
有没有办法通过谷歌可视化api或任何其他api实现这一点? 另外,请让我知道我可以使用哪些其他可视化API来显示板球图
# 1 楼答案
使用ComboChart组合直线序列和散点序列
请参阅下面的工作片段