Во-первых, я не знаю, достоин ли название моего вопроса дать ответ, поэтому я подумал об этом достаточно, чтобы сформулировать его, надеюсь, я могу рассчитывать на чью-то поддержку. У меня есть следующий код, мне нужно показать в первом уровне лет (ось X) и число (ось Y) на данный момент это просто тестовый режим, на втором уровне я хочу показать отделы (ось X) и число (ось Y) Для этого у меня есть три связанных таблицы, которые включают в себя вышеупомянутые.
таблица
таблица
Реляционная таблица
Я показываю вам основу, чтобы дать вам более широкую картину, а не потому, что правда в том, что я держу ее под контролем, и это не доставляет мне проблем.
Проблема состоит в том, чтобы показать значения этой таблицы в демо-версии: https://www.highcharts.com/demo/column-drilldown Пока у меня нет проблем с отображением первого уровня, но чтобы углубиться во второй уровень, я столкнулся с проблемой о том, как создать серию, чтобы она могла быть отображена. Это то, что у меня в консоли показывает мне первый уровень, но я знаю, что у меня что-то не так в серии разверток, но я не знаю, что это может быть.
Я оставляю код, который я использую.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Practica</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/exporting.js"></script>
<script src="js/export-data.js"></script>
<script src="js/data.js"></script>
<script src="js/drilldown.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
<script type="text/javascript">
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Practica. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
<?php
include 'conexion/conexion.php';
$query = "
SELECT
r.var_numerador_mujeres_casadas,
a.mujeres_anio_casadas
FROM resumen_mujeres_casadas r
INNER JOIN mujeres_anios_casadas a ON r.id_mujeres_anios_casadas = a.id_mujeres_anios_casadas
";
$query2 = "
SELECT
r.var_denominador_mujeres_casadas,
a.mujeres_anio_casadas,
d.nombre_departamento
FROM
resumen_mujeres_casadas r
INNER JOIN departamentos_mujeres_casadas d
ON r.id_departamento = d.id_departamento
INNER JOIN mujeres_anios_casadas a
ON r.id_mujeres_anios_casadas = a.id_mujeres_anios_casadas
ORDER BY nombre_departamento ASC
";
$result = mysqli_query($conexion_mysql, $query);
$result2 = mysqli_query($conexion_mysql, $query2);
if ($result && $result2)
{
$arrayData= array();
$arrayData2=array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
array_push($arrayData, array(
"name" => $row['mujeres_anio_casadas'],
"y" => (int)$row['var_numerador_mujeres_casadas'],
"drilldown" => $row['mujeres_anio_casadas']
));
}
while ($row2 = mysqli_fetch_array($result2, MYSQLI_ASSOC))
{
array_push($arrayData2,array(
"name" => $row2['nombre_departamento'],
"id" => $row2['mujeres_anio_casadas'],
"data" => (int)$row2['var_denominador_mujeres_casadas']
));
}
}//FIN DEL IF RESULT
?>
series: [{
name: 'Brands',
data: <?php print $var = json_encode($arrayData); ?>
}],
drilldown: {
series: <?php print $var2 = json_encode($arrayData2); ?>//FIN DE TODA LA SERIE PARA EL DRILLDOWN
}//FIN DEL DRILLDOWN, POR LO QUE HEMOS VISTO ESTO SERA EL LIMITE
});
</script>
данные
Grafica