我正在使用 google图表在柱形图中将饼图显示为太尖。
在饼图中,我想做legend: { position: 'labeled' }
,但是它没有显示柱状图的条形图,因此无法显示饼图。
它仅显示网格线。
我当前的代码:
//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();
}
]]>
当我在“ tooltipOptions”中执行legend: { alignment: 'center' }
时,柱形图和饼图正确显示。
但是我想做'legend:{position:'labeled'}',因为饼图切片未显示较小值的百分比。