Wykresy Google: jedna etykieta narzędzia dla całej kolumny

Question

Mam podstawową tabelę obszaru przy użyciu Google Charts. Jestem w stanie skonfigurować podpowiedzi dla każdego punktu na wykresie, ale czy istnieje sposób na uzyskanie pojedynczej podpowiedzi dla wszystkich punktów w kolumnie.

Oto zrzut ekranu pożądanego zachowania:

Widać, że gdy kursor znajduje się nad punktem na wykresie, pionowa linia jest rysowana i jeden etykietka wyświetla opisać wszystkie dane w tej kolumnie (dane dla obu linii). W razie potrzeby zobacz tutaj live example.

Czy można to osiągnąć za pomocą Google Charts?

Answer 1

Wszystko, co musisz zrobić, to dodać następujące opcje (w przypadku wykresu liniowego): focusTarget: 'category'

Oto przykład (tylko otwarte Google Playground i dodać powyższą linię do opcji na koniec):

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}, 
    // This line will make you select an entire row of data at a time 
        focusTarget: 'category' 
       } 
     ); 
} 

Łatwy w cieście! Aby uzyskać więcej informacji, zobacz focusTarget in the Google Documentation

Jeśli chcesz coś bardziej skomplikowane, można bawić się wokół z domain Data Role

Tutaj jest nieco próbka kodu:

google.load('visualization', '1.1', {'packages':['corechart']}); 

google.setOnLoadCallback(drawChart_C6); 

    function drawChart_C6() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter'); 
    data.addColumn('number', '2009 Sales'); 
    data.addColumn('number', '2009 Expenses'); 
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter'); 
    data.addColumn('number', '2008 Sales'); 
    data.addColumn('number', '2008 Expenses'); 
    data.addRows([ 
     ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300], 
     ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400], 
     ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540], 
     ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620] 
    ]); 

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6')); 
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'}); 
    }