Highcharts Stacked Percentage Spalte Hyperlink

Question

Ich habe ein Stacked% Column Highchart, das ohne Hyperlinks auf Datensätzen funktioniert, aber ich muss auf eine andere Seite aus dem Diagramm verlinken, wenn es ein Standard-Säulendiagramm wäre, hätte ich kein Problem (Ich habe schon eins). Aber ich kann nicht herausfinden, warum ich einen undefinierten Fehler auf der Verbindung bekomme.

Ive suchte nach einem funktionierenden Beispiel, aber es war nicht möglich, einen zu finden, der der gestapelten prozentualen Spalte entsprach.

Ich habe eine Geige eingerichtet, um anzuzeigen, wo ich bis zu, jede Hilfe geschätzt.

$(function() { 
$('#container').highcharts({ 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: 'Space Overview' 
    }, 
    xAxis: { 
    categories: ['a', 'b', 'c', 'd'] 
    }, 
    yAxis: { 
    min: 0, 
    title: { 
     text: 'Total Space (%)' 
    } 
    }, 
    tooltip: { 
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>', 
    shared: true 
    }, 
    plotOptions: { 
    column: { 
     stacking: 'percent' 
    }, 
    series: { 
     cursor: 'pointer', 
     point: { 
     events: { 
      click: function() { 
      location.href = this.options.url; 
      } 
     } 
     } 
    } 
    }, 
    subtitle: { 
    text: '+ Items relate to items in the dispay cabinets.', 
    align: 'left', 
    x: 10 
    }, 
    series: [{ 
    name: 'Free', 
    data: [1498, 1123, 556, 1176], 
    url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d'] 
    }, { 
    name: 'Used', 
    data: [1234,233,23,759], 
    url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d'] 
    }] 
}); 

http://jsfiddle.net/Mooglekins/qv8z5a2o/

Answer 1

Dies ist eine große Frage! Ich habe etwas gegraben und denke, dass ich eine gute Lösung für dich gefunden habe.

Zuerst musste ich aktualisieren, wie Sie den benutzerdefinierten Wert in Ihrer Serie definiert haben. Um bestimmte Werte in events zu erfassen, habe ich das Attribut url innerhalb jedes Datenpunkts verschoben. Jetzt hat jeder Punkt seinen y Wert und den neuen url Wert.

. (Anmerkung: Ich habe Dummy URLs hier, da ich nicht zu denen eine Verbindung der Lage wäre, Sie außerhalb Ihrer Website zur Verfügung gestellt)

series: [{ 
    name: 'Free', 
    data: [ 
     { y: 1498, url: 'http://www.google.com' }, 
     { y: 1123, url: 'http://www.yahoo.com' }, 
     { y: 556, url: 'http://www.bing.com' }, 
     { y: 1176, url: 'http://www.msn.com' } 
    ] 
    }, { 
     // second series here 
    } 
] 

Als nächstes I aktualisiert Ihre events Anruf. Jetzt, da wir das Attribut url an jeden Punkt verschoben haben, können wir uns auf diesen Wert als point.url beziehen (wie Sie den Wert y mit point.y haben könnten).

Was ich auch hier tat, ist window.open vs. window.location zu verwenden. Dies wird eine bessere Erfahrung für Ihre Benutzer sein, damit sie das Diagramm nicht aus den Augen verlieren. Bewahren Sie dies auf, wenn Sie es wünschen.

plotOptions: { 
    column: { 
     stacking: 'percent' 
    }, 
    series: { 
     cursor: 'pointer', 
     point: { 
      events: { 
       click: function (event) { 
        window.open(event.point.url); 
       } 
      } 
     } 
    } 
} 

Hier ist die aktualisierte Geige mit diesen Änderungen: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/

Ich hoffe, das hilft!