¿Puede alguien guiarme en las siguientes consultas?

1) ¿Cómo puedo lograr la información sobre herramientas al pasar el mouse por encima del estado según json. Lo intenté y creé un violín.

Fecha de presentación: 20/05/2017, fecha de presentación de respuesta: 20/06/2017, estado Respuesta: Aprobado

2) Quiero mostrar el color del estado en base a los datos de Json (Aprobado / Aprobación pendiente).

3) ¿Necesito pasar json para todos los estados para "hc-key" ya que allAreas propiamente dicho no muestra todos los estados?

http://fiddle.jshell.net/a65yufqf/

Mapa de EE. UU.

0
Anshul Agrawal 4 ago. 2017 a las 12:46

2 respuestas

La mejor respuesta

Solución para cada punto

1> Para la información sobre herramientas, debe usar el formateador

tooltip: {
  formatter: function() {
    return 'submissionDate: <b>' + this.point.submissionDate + '</b><br/>' +
      'submissionResponseDate: <b>' + this.point.submissionResponseDate + '</b><br/>' +
      'stateResponse: <b>' + this.point.stateResponse + '</b><br/>'

  }
},

2> Prepare datos JSON que contengan color

  var data = [{
    "hc-key": "us-ca",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "06/20/2017",
    "stateResponse": "Approved",
    "color": "#C40401",
  }, {
    "hc-key": "us-or",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "",
    "stateResponse": "Approval Pending",
    "color": "#0200D0"
  }];

3> Como se muestra en la imagen de muestra, desea un color predeterminado que no esté en JSON. Entonces, para esto, debe usar nullColor: 'grey', en serie.

series: [{
allAreas: true,
  data: data,
  mapData: Highcharts.maps['countries/us/us-all'],
  joinBy: 'hc-key',
  //name: 'Random data',
  nullColor: 'grey', //add this to color default area
  states: {
    hover: {
      color: '#BADA55'
    }
  },
  dataLabels: {
    enabled: true,
    format: '{point.name}'
  }
}, {
  name: 'Separators',
  type: 'mapline',
  data: Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
  color: 'black',
  showInLegend: false,
  enableMouseTracking: false
}]

Demostración de Fiddle

1
Deep 3015 4 ago. 2017 a las 11:41

Elemento n. ° 1: descripción emergente

Para agregar una información sobre herramientas a su mapa que extrae los valores de datos JSON que ha definido, agregará lo siguiente:

tooltip: {
  formatter: function () {
    /* set value if the state hasn't yet responded */
    if (!this.point.submissionResponseDate) {
      this.point.submissionResponseDate = 'not applicable';
    }
    /* format the tooltip */
    return '<strong>' + this.point.name + '</strong><br />' +  
            'Submission date: ' + this.point.submissionDate + 
            '<br />Submission response date: ' + this.point.submissionResponseDate + 
            '<br />State response: ' + this.point.stateResponse;
  }
},

Su información sobre herramientas se verá así:

enter image description here

Tenga en cuenta la declaración if que agregué para su fecha de respuesta ... en lugar de mostrar un valor vacío (como lo hizo para Oregon en su ejemplo), esto mostrará un valor más útil para el usuario.

Elemento n. ° 2: colores de estado basados en datos JSON

Puede analizar sus datos JSON y agregar un atributo value en función de si el estado está aprobado o pendiente de aprobación. El valor luego tomará los colores que definiste en colorAxis:

  /* check the JSON data and add a value for approved
   or approval pending that will be picked up by your 
   colorAxis formatting */
  for (d = 0; d < data.length; d++) {
    if (data[d].stateResponse == "Approved") {
      data[d].value = -1;       /* will color state red */
    } else {
      data[d].value = 1;        /* will color state blue */
    }
  }

Querrá ejecutar esto después de haber definido o extraído sus datos, pero antes de establecer los atributos del gráfico.

Elemento n. ° 3: obtención de datos para todos los estados

No, no es necesario que ingrese hc-key datos para todos los estados; solo los que necesita, como lo hizo en su ejemplo.


Modifiqué tu violín con estas respuestas: http://fiddle.jshell.net/brightmatrix / a65yufqf / 4 /

¡Espero que esto sea útil para usted!

0
Mike Zavarello 4 ago. 2017 a las 11:48