Код: Выделить всё
var cantidadEmpleadosContratadosPorAno = empleados
.GroupBy(empleado => empleado.FechaContratacion.Year)
.OrderBy(grupo => grupo.Key)
.Select(grupo => new {
AnoContratacion = grupo.Key,
CantidadContratados = grupo.Count()
})
.ToList();
Код: Выделить всё
new Empleado
{
IdEmpleado = 1,
Nombre = "John Doe",
Departamento = "Ingeniería",
Posicion = "Ingeniero de Software",
AñosExperiencia = 5,
Edad = 30,
Salario = 75000,
NivelSatisfaccion = 0.8,
CalificacionDesempeno = 4.5,
HorasTrabajo = 40,
FechaContratacion = DateTime.Parse("2018-05-15")
}
Код диаграммы:
Код: Выделить всё
const fechaContratacion = JSON.parse('@Html.Raw(ViewBag.FechaContratacion)'); // Lista de años
const cantidadEmpleados = JSON.parse('@Html.Raw(ViewBag.CantidadEmpleados)'); // Lista de cantidades
const opcionesGraficoCantidadEmpleadosContratadosPorAños = {
series: [{
name: "Cantidad Empleados",
data: cantidadEmpleados
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Cantidad de Empleados por Año',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
xaxis: {
categories: fechaContratacion, // Asegurarse de usar los años como categorías en el eje X
title: {
text: 'Años'
}
},
yaxis: {
title: {
text: 'Cantidad de Empleados'
}
}
};
var graficoCantidadEmpleadosContratadosPorAños = new ApexCharts(
document.querySelector("#graficoCantidadEmpleadosContratadosPorAños"),
opcionesGraficoCantidadEmpleadosContratadosPorAños
);
graficoCantidadEmpleadosContratadosPorAños.render();
Это HTML-представление, в котором я' Представляю свою диаграмму:
Код: Выделить всё
@{
ViewData["Title"] = "Dashboard";
}
.card {
padding: 10px;
margin: 20px;
}
document.addEventListener("DOMContentLoaded", function () {
const departamentos = @Html.Raw(ViewBag.Departamentos);
const promedioDesempeno = @Html.Raw(ViewBag.PromedioDesempeno);
const promedioSatisfaccion = @Html.Raw(ViewBag.PromedioSatisfaccion);
const puntajeDesempeno = @Html.Raw(ViewBag.PuntajeDesempeno);
const puntajeSatisfaccion = @Html.Raw(ViewBag.PuntajeSatisfaccion);
// Extraemos los datos del ViewBag para el gráfico
const data = @Html.Raw(ViewBag.CantidadEmpleados);
//Promedio de salario por departamento
const prromedioSalarioPorDepartamento = @Html.Raw(ViewBag.PromedioSalarioPorDepartamento);
const configuracionGraficoPromedioDesemepenoSatisfaccion = {
chart: {
type: 'radar'
},
series: [
{
name: 'Desempeño Promedio',
data: promedioDesempeno
},
{
name: 'Satisfacción Promedio',
data: promedioSatisfaccion
}
],
labels: departamentos,
title: {
text: 'Comparación de Desempeño y Satisfacción Promedio por Departamento'
}
}
const graficoPromedioDesemepenoSatisfaccion = new ApexCharts(document.getElementById("graficoPromedioDesemepenoSatisfaccion"), configuracionGraficoPromedioDesemepenoSatisfaccion);
graficoPromedioDesemepenoSatisfaccion.render();
const configuracionGraficoPuntajeDesemepenoSatisfaccion = {
chart: {
type: 'bar'
},
series: [
{
name: 'Desempeño',
data: puntajeDesempeno.map(e => e.toFixed(2))
},
{
name: 'Satisfacción',
data: puntajeSatisfaccion.map(e => e.toFixed(2))
}
],
xaxis: {
categories: departamentos
},
title: {
text: 'Comparación puntaje de Desempeño y Satisfacción por Departamento'
}
}
const graficoPuntajeDesemepenoSatisfaccion = new ApexCharts(
document.getElementById('graficoPuntajeDesemepenoSatisfaccion'),
configuracionGraficoPuntajeDesemepenoSatisfaccion);
graficoPuntajeDesemepenoSatisfaccion.render();
// Configuración para el treemap de cantidad de empleados por departamento
const options = {
chart: {
type: 'treemap',
height: 350
},
title: {
text: 'Cantidad de Empleados por Departamento'
},
series: [{
data: data
}],
legend: {
show: true
}
};
// Renderizar el gráfico
const chart = new ApexCharts(document.getElementById("chart"), options);
chart.render();
//Promedio de salario con por departamento
const configuracionPromedioSalarioPorDepartamento = {
chart: {
type: 'pie'
},
series: prromedioSalarioPorDepartamento,
labels: departamentos,
title: {
text: "Salario Promedio por departamento"
}
};
const graficoPromedioSalarioPorDepartamento = new ApexCharts(document.getElementById("graficoPromedioSalarioPorDepartamento"), configuracionPromedioSalarioPorDepartamento);
graficoPromedioSalarioPorDepartamento.render();
//el promedio de años de experiencia por posición
// Cargamos los datos desde ViewBag
const posiciones = @Html.Raw(ViewBag.Posicion);
const promedioAniosExperiencia = @Html.Raw(ViewBag.PromedioPorPosicion);
// Configuración del gráfico
const opcionesGraficoPromedioAnosExperienciaPorPosicion = {
chart: {
type: 'bar'
},
series: [
{
name: 'Años de experiencia',
data: promedioAniosExperiencia // Usamos los promedios
},
],
xaxis: {
categories: posiciones // Usamos las posiciones en el eje X
},
title: {
text: 'Promedio de años de experiencia por posición'
}
};
// Creación y renderizado del gráfico
const graficoPromedioAnosExperienciaPorPosicion = new ApexCharts(
document.getElementById('GraficoPromedioAnosExperienciaPorPosicion'),
opcionesGraficoPromedioAnosExperienciaPorPosicion
);
graficoPromedioAnosExperienciaPorPosicion.render();
const fechaContratacion = JSON.parse('@Html.Raw(ViewBag.FechaContratacion)'); // Lista de años
const cantidadEmpleados = JSON.parse('@Html.Raw(ViewBag.CantidadEmpleados)'); // Lista de cantidades
const opcionesGraficoCantidadEmpleadosContratadosPorAños = {
series: [{
name: "Cantidad Empleados",
data: cantidadEmpleados
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Cantidad de Empleados por Año',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
xaxis: {
categories: fechaContratacion, // Asegurarse de usar los años como categorías en el eje X
title: {
text: 'Años'
}
},
yaxis: {
title: {
text: 'Cantidad de Empleados'
}
}
};
var graficoCantidadEmpleadosContratadosPorAños = new ApexCharts(
document.querySelector("#graficoCantidadEmpleadosContratadosPorAños"),
opcionesGraficoCantidadEmpleadosContratadosPorAños
);
graficoCantidadEmpleadosContratadosPorAños.render();
})
Если я не ошибаюсь, я использую ViewData, содержащую годы потому что я указал «.Year», когда сгруппировал их в контроллере, но по какой-то причине он показывает мне отделы вместо лет, и количество сотрудников правильное (я думаю), но годы не отображаются в виде меток по оси X, Я знаю, что в этом AnoContratacion хранятся годы, потому что Я пробовал выбирать места, используя их в качестве данных вместо cantidadEmpleados, и они показывали мне годы вместо отделов компании (не реальной компании), но когда я возвращал их в категории по оси X, они отображались как отделы, и я попробовал весь день, чтобы решить эту проблему.
Подробнее здесь: https://stackoverflow.com/questions/791 ... d-of-years