Google Visualization Liniendiagramm kann keine benutzerdefinierten Punkte anzeigen

Question

Ich versuche, ein Liniendiagramm zwischen Overs und Runs zu zeigen, die jeweils von zwei Teams gewertet werden.

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(); 
} 

}

Dies ist, was es zur Folge hat. Die Standardpunkteinstellung besteht jedoch darin, die Daten aus x- und y-Koordinaten anzuzeigen. Ich möchte eine dritte Datenreihe mit Wickets zeigen, die in den einzelnen Innings im Liniendiagramm anstelle des Punktes gefallen sind. Wie sie in der Grille zeigen.

Gibt es einen Weg, dies zu erreichen, durch Google-Visualisierung API oder eine andere API? Und bitte lassen Sie mich auch wissen, welche andere Visualisierung ich verwenden kann, um Grille-Grafiken zu zeigen.

UPDATE - Beispiel

Answer 1

eine ComboChart verwenden sowohl Linien- und Streu Serie zu kombinieren,

folgenden Arbeits Schnipsel sehen ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'Overs'); 
 
    data.addColumn('number', 'Chargers - Runs'); 
 
    data.addColumn('number', 'Royals - Runs'); 
 
    data.addColumn('number', 'Chargers - Wickets'); 
 
    data.addColumn('number', 'Royals - Wickets'); 
 

 
    data.addRows([ 
 
    [0, 0, 0, null, null], 
 
    [2, 22, 14, 18, null], 
 
    [3, 30, 18, null, null], 
 
    [4, 32, 35, null, 30], 
 
    [5, 48, 60, 50, null], 
 
    [6, 58, 72, null, 70] 
 
    ]); 
 

 
    var options = { 
 
    chartArea: { 
 
     top: 12, 
 
     right: 12, 
 
     bottom: 36, 
 
     left: 24, 
 
     height: '100%', 
 
     width: '100%' 
 
    }, 
 
    hAxis: { 
 
     title: 'Overs' 
 
    }, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    series: { 
 
     0: { // Chargers - Runs 
 
     color: '#d32f2f' 
 
     }, 
 
     1: { // Royals - Runs 
 
     color: '#1e88e5' 
 
     }, 
 
     2: { // Chargers - Wickets 
 
     color: '#d32f2f', 
 
     pointSize: 8, 
 
     type: 'scatter' 
 
     }, 
 
     3: { // Royals - Wickets 
 
     color: '#1e88e5', 
 
     pointSize: 8, 
 
     type: 'scatter' 
 
     } 
 
    }, 
 
    seriesType: 'line', 
 
    vAxis: { 
 
     title: 'Runs' 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>