javascript - graficas - Usando cadena para xkey en gráficos de morrise
morris js (4)
Aquí está mi ejemplo que también funciona.
$(function() {
Morris.Area({
element: ''morris-area-chart-days'',
data: [{
day: ''Mon'',
a: 95
}, {
day: ''Tue'',
a: 66
}, {
day: ''Wed'',
a: 86
}, {
day: ''Thu'',
a: 151
}, {
day: ''Fri'',
a: 115
}, {
day: ''Sat'',
a: 93
}, {
day: ''Sun'',
a: 38
}],
xkey: ''day'',
ykeys: [''a''],
parseTime: false,
labels: [''Messages''],
pointSize: 2,
hideHover: ''auto'',
resize: true
});
});
Estoy tratando de usar los gráficos de morrise para crear un gráfico de líneas que muestre los números de los vehículos según los días de la semana.
El problema es que cuando uso String en la xKey, los resultados aparecen así:
pero si los reemplacé con números, funciona bien.
Aquí está mi código.
<div class="col-xs-6">
<label>Transports Traffic</label>
<div id="traffic_chart">
<script>
new Morris.Area({
element: ''traffic_chart'',
data: [
{y: ''Sat'', a: 100, b: 90, c:22},
{y: ''Sun'', a: 75, b: 65, c:22},
{y: ''Mon'', a: 50, b: 40, c:22},
{y: ''Tue'', a: 75, b: 65, c:22},
{y: ''Wed'', a: 50, b: 40, c:22},
{y: ''Thi'', a: 75, b: 65, c:22},
{y: ''Fri'', a: 100, b: 90, c:22}
],
xkey: ''y'',
ykeys: [''a'', ''b'', ''c''],
labels: [''Cars'', ''Bikes'', ''Trucks'']
});
</script>
</div>
</div>
En Morrischart, si ''parseTime'' se establece en falso, omite el análisis de hora / fecha para los valores de X, de lo contrario, los trata como una serie espaciada de manera equitativa; .. Entonces, ¿podría insertar la línea de código a continuación?
parseTime: false
Reescriba el código como abajo.
new Morris.Area({
------
parseTime:false,
------
});
En la biblioteca de morrise, la clave X siempre se analiza en el valor de fecha / hora. Así que para evitar eso y usar valores de cadena en X-Key, debe agregar este atributo
parseTime: false
Funcionó después de que lo agregué.
utilizar esta...
tiempo parse: falso,
Morris.Line({
element: ''morris-line-chart'',
data: <?php echo json_encode($emparray);?>,
xkey: ''xco'',
ykeys: [''x1'', ''x2''],
labels: [''x1'', ''x2''],
hideHover: ''auto'',
pointSize: 3,
parseTime: false,
resize: true
});