1
我在下面的例子中工作https://jsfiddle.net/neelkamal0666/6737c2q5/Highcharts angular.js自定義提示
Highcharts.chart('container', {
chart: {
type: 'column'
},
colors: ["rgb(241,198,64)", "#0091ea"],
title: {
text: ' ',
useHTML : true
},
xAxis: {
categories: ['Sowing', 'Activity', 'Application', 'Harvest']
},
yAxis: {
min: 0,
title :'',
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
credits: {
enabled: false
},
tooltip: {
shared: false,
backgroundColor: 'black',
borderColor: 'black',
borderRadius: 10,
color: 'white',
useHTML :true,
borderWidth: 3,
headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
pointFormat: '<b style="color: #fff;">{series.name}: {point.y}</b><br/><b style="color: #fff;">Total(%): {point.stackTotal}</b><br />',
/*formatter: function() {
var s = '<b>' + this.x + '</b>';
angular.forEach(this.points, function() {
s += '<br/>' + this.series.name + ': ' +
this.y + 'm';
});
return s;
} */
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: 'white',
style: {
textShadow: ''
}
}
},
series: {
pointWidth: 50, //width of the column bars irrespective of the chart size
additional : ["Sowing Area", "Activity", "Application", "Harvest"]
}
},
series: [{
name: 'Pending(%)',
data: [60, 40, 20, 80],
}, {
name: 'Completed(%)',
data: [40, 60, 80, 20],
}]
});
在提示我要顯示不同的值 例如,如果在播種用戶點擊它會顯示
Pending : 60
Total : 100
Sowing Area : 4500 H
Plots Audited : 1200 H
而當用戶點擊活動時,它會顯示
Pending : 40,
Completed : 60,
Total : 100,
Total Activities : 200
Closed Activities : 125
當用戶點擊應用程序,它會顯示
Pending :20,
Completed :80
Total :100,
Per acre usage : 200
而且當用戶點擊豐收,它會顯示
Pending :80,
Completed :20
Total :100,
Volume Forcast : 100MT
我讀Highchart的文檔,並通過大量的實例去但仍然無法弄清楚我該如何實現這一目標。
有人可以幫忙嗎?
非常感謝卡茨珀。這正是我所期待的。 –