谷歌饼图 - 图例：{position：“标记”}不工作

Question

I am displaying pie-chart as a tootip inside a column chart using google charts .

In the pie-chart, I want to do legend: { position: 'labeled' } , but it is not displaying the bars of the Column chart, and so cannot display the Pie chart. It is only displaying the gridlines.

My current code:

//Create Charts 
function AggregateCharts(aggregateResult){
          $('#hidden_div').show();
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback( function(){ drawTooltipCharts(aggregateResult) });
 }


  // Draw tool tip charts
  function drawTooltipCharts(aggregateResult) {

     //set bar chart data
     primaryData=[];

    if(aggregateResult){

          aggregateResult.map(data=>{

          if(data.Count>0 || data.High>0 || data.Medium>0)
          {
               //Set Options
                var tooltipOptions = {
                    title: 'Data Title', 
                    isStacked: true,
                    pieHole: 0.4, 
                    sliceVisibilityThreshold:0,
                    colors: ['#c1c1c1','#0074AA','#1DB2F7','#F7941D' ],
                    legendTextStyle: { color: '#1DB2F7' ,fontSize: 12},
                    titleTextStyle: { color: '#1DB2F7',  alignment: 'center',fontSize: 15},
                    chartArea: {width:510, height: 250} ,
                    legend: { position: 'labeled' },
                    pieStartAngle: 100,
                    pieSliceTextStyle: {   fontSize:12  },

                };

                //Create chart View
                var view = new google.visualization.DataTable();
                view.addColumn('string', 'Criteria');
                view.addColumn('number', 'Users');

                var total=total;
                var Count=data.Count;
                var High=data.High;
                var Medium=data.Medium;



                //calculation part 
                var Countpercentage =((Count/total).toFixed(2))*100;  
                var Highpercentage =((High/total).toFixed(2))*100;  
                var Mediumpercentage =((Medium/total).toFixed(2))*100;  
                var NoCriteriaEndorsed= 100-(Math.floor(Countpercentage) + Math.floor(Highpercentage) + Math.floor(Mediumpercentage) );



                var tooltipData=[]; 

                tooltipData.push(["No Criteria Endorsed",NoCriteriaEndorsed]);
                tooltipData.push(["50-69% Criteria Endorsed",Mediumpercentage]);
                tooltipData.push(["70-99% Criteria Endorsed",Highpercentage]);
                tooltipData.push(["100% Criteria Endorsed",Countpercentage]);

                 //Add total rows
                view.addRows(tooltipData);

                var hiddenDiv = document.getElementById('hidden_div');
                var tooltipChart = new google.visualization.PieChart(hiddenDiv);

                google.visualization.events.addListener(tooltipChart, 'ready', function() {

                        // Get the PNG of the chart and set is as the src of an img tag.
                           var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

                          // Add the new tooltip image to your data rows.
                           primaryData.push([data.Diagnosis,data.Count,tooltipImg,data.High,tooltipImg,data.Medium,tooltipImg]);
                });

               tooltipChart.draw(view, tooltipOptions);  

          }
      })

            //Create bar chart 
            drawBarChart(primaryData);
      }

}




 function drawBarChart(primaryData) {

var fromDate=$("#fromdate").val()?$("#fromdate").val():getMinDate(AggregateData)

var tooltipData = new google.visualization.DataTable();

  tooltipData.addColumn('string', 'Event');
  tooltipData.addColumn('number', '100% Criteria Endorsed');

  // Add a new column for your tooltips.

  tooltipData.addColumn({
    type: 'string',
    label: 'Tooltip Chart',
    role: 'tooltip',
    'p': {'html': true}
  });

  tooltipData.addColumn('number', '70-99% Criteria Endorsed');

  // Add a new column for your tooltips.
  tooltipData.addColumn({
    type: 'string',
    label: 'Tooltip Chart',
    role: 'tooltip',
    'p': {'html': true}
  });

tooltipData.addColumn('number', '50-69% Criteria Endorsed');

// Add a new column for your tooltips.
tooltipData.addColumn({
  type: 'string',
  label: 'Tooltip Chart',
  role: 'tooltip',
  'p': {'html': true}
});


// Add your data (with the newly added tooltipImg).
tooltipData.addRows(primaryData);

   var minwidth=tooltipData.getNumberOfRows() <25 ?(25*50) : tooltipData.getNumberOfRows() *50;      
var primaryOptions = {

  title: 'Results' ,
  legend: 'none',
  tooltip: {isHtml: true},
  isStacked: true,
  colors: ['#F7941D', '#1DB2F7', '#0074AA'],
  legendTextStyle: { color: '#000000' , fontSize: 20 },
  titleTextStyle: { color: '#000000', fontSize: 16, fontName: 'Calibri Light', bold: true },
  width: minwidth,
  bar: {groupWidth:15},

    hAxis: {

    textStyle: { color: "#1DB2F7" ,fontSize: 8, bold: true   },
    gridlines: {  count: 4, color: "#1DB2F7"  },
    baselineColor: '#1DB2F7',

    },

    vAxis: {
          title: 'Number of Respondents',
          titleTextStyle: { color: '#000000', fontSize: 18, fontName: 'Calibri Light', bold: true},
          textStyle: { color: "#1DB2F7", fontSize: 10, bold: true },
          gridlines: {  count: 4 , color: "#1DB2F7"  },
          baselineColor: '#1DB2F7' ,

      },

};

    var visibleDiv = document.getElementById('visible_div');
    var primaryChart = new google.visualization.ColumnChart(visibleDiv);

    primaryChart.draw(tooltipData, primaryOptions);
    CustomOptions(primaryOptions);

    var btndownloadchart = document.getElementById('downloadchart');

      btndownloadchart.addEventListener('click', function () {
         this.href=  primaryChart.getImageURI();
        }, false);
  }

  //Date format to display in chart legend
  function dateFormat(requestDate){

    var date = requestDate?new Date(requestDate):new Date();
    var dateString =date.toLocaleString('en', { month: 'long' })+" "+  date.getDate() +", "+ date.getFullYear() ;
    return dateString;
  }

  //get mindate value for aggregate if from date not selected initially..
  function getMinDate(AggregateData){

      if(AggregateData){
        var minDate = Math.min.apply(null, AggregateData.map(function(o) { return new  Date(o.CreatedDate); }))
        return   date = new Date(minDate)
      }
      return  new Date()
  }

  function CustomOptions(primaryOptions) {
    var $container = $('#visible_div');
    var svg = $container.find('svg') ;
    var svgWidth=$container.find('svg').width();

     var  $titleElemWidth = parseInt($container.find('svg').width()/8) ;

     var svgMargin= ('-' +((svgWidth/15)>170?170:(svgWidth/15))+ 'px');
     svg.css("margin-left", svgMargin);

    var $titleElem = $container.find("text:contains(" + primaryOptions.vAxis.title +")");
     $titleElem.attr('y',$titleElemWidth<320?320:$titleElemWidth);

    //Hide tooltip chart 
    $('#hidden_div').hide();

}
 ]]>

When I do legend: { alignment: 'center' } in the 'tooltipOptions', the Column chart and the Pie-chart is displaying correctly.

But I want to do 'legend: { position: 'labeled' }', as the Pie-Chart slices is not displaying the percentage for small values.

Answer 1

Try passing the following to your options:

pieSliceTextStyle: {
  color: 'white',
  fontSize: '13',
  top: 10,
  left: 50,
  position: 'start',
},