Question

<script type="text/javascript"> 


    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart); 
    function drawChart() {

    Year = ['Week 1','Week 2','Week 3','Week 4','Week 5'];
    Hours = [42,52,40,38,40];

    var dataArray = [['Week', 'Hours']];

    for (var n = 0; n < 5; n++){
       dataArray.push ([Year[n], Hours[n]])
    }

    var data = new google.visualization.arrayToDataTable(dataArray);



        var options = {
        legend: {position: 'right'},
            is3D: 'true',
            width: 550,
            height: 350,
            colors: [<?php echo $color_code_string ;?>], //defines color '#00bcd4','#ff0000','#ff0000','#bdbdbd','#bdbdbd'
            pieSliceText: 'label',
            };  

          // redraw the chart.
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(data, options);

    }
</script>

<div id="chart_div"></div>

输出

如何将修复图例放在提及状态的图像中。 Week not active，Not Submitted代替Week 1，Week 2？我只需要将图例更改为自定义标题，其余部分也相同，
是否可以仅删除悬停时显示的百分比字段并显示42 hours之类的文字？
此外，如果我从Hours = [42,52,40,38,40] to Hours = [42,52,40,0,0]更改，则饼图仅显示3个部分而不是5部分。如何显示5部分，其中0值已通过

Answer 1

您可以通过自定义图表工具提示来实现它，为此我们需要引入tooltip role列：

store.setKeyEntry("tomcat", keyPair.getPrivate(),
                    "password".toCharArray(), certs);

然后指定自定义工具提示文本，例如：

data.addColumn({ type: 'string', role: 'tooltip','p': {'html': true} });

完整示例

 for(var i = 0; i < data.getNumberOfRows();i++){
        var tooltipText = '...'; 
        data.setValue(i,2,tooltipText);
  }

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {

    var Year = ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'];
    var Hours = [42, 52, 40, 38, 40];

    var dataArray = [['Week', 'Hours']];

    for (var n = 0; n < Hours.length; n++) {
        dataArray.push([Year[n], Hours[n]]);
    }

    var data = new google.visualization.arrayToDataTable(dataArray);

    data.addColumn({ type: 'string', role: 'tooltip','p': {'html': true} });  
    
    var yearStatuses = {
        'Week 1': 'Week not active',
        'Week 2': 'Not Submitted'
    };

    for(var i = 0; i < data.getNumberOfRows();i++){
        var curYear = data.getValue(i,0);
        var yearStatus = (typeof yearStatuses[curYear] != 'undefined' ? yearStatuses[curYear] : ''); 
        var tooltipText =  yearStatus + '<br/>' + '<b>' + data.getValue(i,1) + ' hours</b>';
        data.setValue(i,2,tooltipText);
    }


    var options = {
        legend: { position: 'right' },
        is3D: 'true',
        width: 550,
        height: 350,
        colors: ['#00bcd4', '#ff0000', '#ff0000', '#bdbdbd', '#bdbdbd'],
        pieSliceText: 'label',
        //tooltip: {isHtml: true}
    };


    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);

}

<强>更新

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="chart_div"></div>

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {

    var Year = ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'];
    var Hours = [42, 52, 40, 38, 40];

    var dataArray = [['Week', 'Hours']];

    for (var n = 0; n < Hours.length; n++) {
        dataArray.push([Year[n], Hours[n]]);
    }

    var data = new google.visualization.arrayToDataTable(dataArray);

    data.addColumn({ type: 'string', role: 'tooltip','p': {'html': true} });  
    for(var i = 0; i < data.getNumberOfRows();i++){
        var curYear = data.getValue(i,0);
        var tooltipText = data.getValue(i,1) + ' hours</b>';
        data.setValue(i,2,tooltipText); 
    }


    var options = {
        legend: { position: 'right' },
        is3D: 'true',
        width: 550,
        height: 350,
        colors: ['#00bcd4', '#ff0000', '#ff0000', '#bdbdbd', '#bdbdbd'],
        pieSliceText: 'label'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    setLegendProperties(chart.getContainer());
}



function setLegendProperties(chart)
{
    var yearStatuses = {
        'Week 1': 'Week not active',
        'Week 2': 'Not Submitted',
        'Week 3': 'Submitted',
        'Week 4': 'Approved',
        'Week 5': 'Rejected'
    };

    var legendBar = document.getElementsByTagName('g')[0]; //get legend container  
    var labels = legendBar.getElementsByTagName('text');
    for (var i = 0; i < labels.length; i++) {
        var curLabel = labels[i].innerHTML;
        labels[i].innerHTML = yearStatuses[curLabel];
     }
}

更新2

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {

    var Year = ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'];
    var Hours = [42, 52, 40, 38, 40, 50];

    var dataArray = [['Week', 'Hours']];

    for (var n = 0; n < Hours.length; n++) {
        dataArray.push([Year[n], Hours[n]]);
    }

    var data = new google.visualization.arrayToDataTable(dataArray);

    data.addColumn({ type: 'string', role: 'tooltip','p': {'html': true} });  
    for(var i = 0; i < data.getNumberOfRows();i++){
        var curYear = data.getValue(i,0);
        var tooltipText = data.getValue(i,1) + ' hours</b>';
        data.setValue(i,2,tooltipText); 
    }


    var options = {
        legend: { position: 'right' },
        is3D: 'true',
        width: 550,
        height: 350,
        colors: ['#00bcd4', '#ff0000', '#ff0000', '#bdbdbd', '#bdbdbd'],
        pieSliceText: 'label'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    setLegendProperties(chart.getContainer());
}



function setLegendProperties(chart)
{
    
    var legendBar = document.getElementsByTagName('g')[0]; //get legend container  


    var legendInfo = {
        'Week 1': {'Label': 'Week not active', 'IconColor': '#FFA500'},
        'Week 2': {'Label': 'Not Submitted', 'IconColor': '#bdbdbd'},
        'Week 3': {'Label':'Submitted', 'IconColor': '#00bcd4'} ,
        'Week 4': {'Label':'Approved', 'IconColor': '#00ff00'},
        'Week 5': {'Label':'Rejected', 'IconColor': '#ff0000'}
    };

    //adjust legend labels & icons
    var labels = legendBar.getElementsByTagName('text');
    for (var i = 0; i < labels.length; i++) {
        var key = labels[i].innerHTML;
        labels[i].innerHTML = legendInfo[key].Label;

        var icon = labels[i].parentElement.nextSibling;
        icon.setAttribute('fill',legendInfo[key].IconColor);
    }
}

Answer 2

将Year = ['Week 1','Week 2','Week 3','Week 4','Week 5'];替换为您要求的标题。请注意，值的相应位置将用于＆＃34; title＆＃34;在您的Hours数组中。
您需要在选项中添加以下内容：tooltip:{text:'value'}

有关piecharts here的更多信息。

Google图表 - 显示静态图例并移除百分比字段

2 个答案: