javascript - graficas - Usando cadena para xkey en gráficos de morrise

morris js

Question

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>

Answer 1

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
    });
});

Answer 2

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,
             ------
});

Answer 3

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é.

source

Answer 4

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
    });