2017-10-06 6 views
0

Von D3 zu Highcharts wechseln und das entzieht sich mir. Ich habe ein ziemlich komplexes Objekt, das ein clickthrough Objekt enthält, auf das in einer Funktion auf einem Punktklick in der Serie zugegriffen werden muss. Ich erstelle das Reihen-Array mit den Daten und benenne es gut mit einer kleinen Umwandlung, aber ich muss dieses Objekt auch an die Datenpunkte anhängen. Keine Ahnung wie.Objekt an Highcharts anfügen click event

Schnelles Beispiel. Originaldaten:

[ 
    { 
    "key": "Super Cool Thing", 
    "format": ".2f", 
    "values": [ 
     { 
     "label": "01", 
     "value": 9.5, 
     "format": ".2f", 
     "order": 0, 
     "tooltip": "numerator = 133, denominator = 14", 
     "clickthrough": { 
      "output_format": "json", 
      "metrics": "", 
      "options": { 
      "columns": [ 
       { 
       "order": 1, 
       "display_as": "Brand", 
       "format": "{0}", 
       "name": "brand", 
       "data_type": "string" 
       }, 
       { 
       "order": 2, 
       "display_as": "Last Submit Time (Month)", 
       "format": "%m", 
       "name": "last-submit-time-month", 
       "data_type": "datetime" 
       }, 
       { 
       "order": 3, 
       "display_as": "Agent Things", 
       "format": "{0}", 
       "name": "agent-thing-values", 
       "data_type": "string" 
       } 
      ] 
      }, 
      "cut_y": "brand", 
      "type": "", 
      "filter": { }, 
      "cut_x": "last-submit-time-month" 
     }, 
     "metrics": [ 
      { 
      "name": "Agent - Feel Appreciated Mean", 
      "slug": "qcustomersatr4-mean" 
      } 
     ] 
     } 
    ] 
    } 
] 

Lauf durch eine (superschnelle POC) Funkt:

for(let i = 0; i < data.length; i++){ 
    var values = []; 
    var xcuts = []; 

    data[i].values.forEach(val => { 
     values.push(val.value); 
     xcuts.push(val.label); 
    }); 

    chart.addSeries({ 
     name: data[i].key, 
     data: values 
    }) 

    chart.xAxis[0].setCategories(xcuts); 
} 

und das alles funktioniert gut. Aber ich brauche das clickthrough Objekt so ich so etwas tun kann:

plotOptions: { 
     series: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
      point: { 
       events: { 
        click: function (event) { 
         console.log('CLICKTHROUGH DATA HERE'); 
         console.log(event.point); 
        } 
       } 
      } 
     }, 
    }, 

Ich bin nicht sicher, wie die Serie Daten formatiert werden zusätzliche Daten enthalten, die in einer Event-Funktion auf der ganzen Linie später zugegriffen werden kann. Ich tue dies derzeit über d3 und es ist in Ordnung, aber ich kämpfe mit der Highcharts-Methode, um das gleiche zu tun. Es scheint, ich kann nicht einfach hinzufügen, was ich will, zu den Serien oder Daten, also ist das möglich?

Antwort

1

Haben Sie es. Ich muss den y Wert explizit einstellen und dann kann ich was auch immer hinzufügen, das dann im Ereignis nützt.

Beispiel:

data[i].values.forEach(val => { 
     values.push({link: val.clickthrough, y:val.value}); 
     xcuts.push(val.label); 
    }); 

    chart.addSeries({ 
     name: data[i].key, 
     data: values 
    })