Мне действительно нужно иметь возможность выполнять детализацию столбцов данных. Обратите внимание, что будет 4 столбца данных в месяц.
Я также видел примеры столбца детализации на веб-сайте Highcharts. Я понимаю, как это работает, если данные жестко закодированы. Но эти данные должны быть извлечены из базы данных.
Я могу получить базовую диаграмму из следующего файла my_data.php.
[{"name":"ONE","data":[1077668]},{"name":"TWO","data":[39657923]}, {"name":"THREE","data":[99428783]},{"name":"FOUR","data":[4431354]}]
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("my_data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'testing',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
Я действительно смущен тем, где в этом типе диаграммы я бы поместил вызов детализации? Я знаю, что это должно быть что-то вроде следующего. Я также думаю, что для разных детализации будет несколько операторов if/else.
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
var chart = this.series.chart;
$.getJSON(...., function(data){
chart.setTitle({
text: data.name
});
setChart(data.name, data.categories, data.data, data.color, data.level);
});
} else { // restore
setChart(name, categories, data, null, level);
}
}
Если я использую неправильные данные диаграммы, сообщите мне об этом. Я могу использовать что-то подобное, но у меня проблемы с созданием диаграммы с исходными данными из базы данных. потому что у меня была бы такая же проблема с тем, где установить имя сверла (например, уровень 0, уровень 1 и т. д.)
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
formatter: function() {
- person Hugo Dozois   schedule 28.02.2013