2011-07-01 10 views
7

staram się dostosować do Highcharts wykres punktowy z tym data seriiHighcharts rozpraszają wykres o nazwie za punkt

series: [{ 
    data: [[1,2],[2,5]] 
}] 

tak, że mogę umieścić nazwę na każdym punkcie, chcę pokazać nazwę w podpowiedź. API doc says przedmiotem wymienionych wartości można określić jak to

series: [{ 
    data: [{ 
     name: 'Point 1', 
     x: 1, 
     y: 2 
    }, { 
     name: 'Point 2', 
     x: 2, 
     y: 5 
    }] 
}] 

ale wydaje się, że X i Y nie odebrał. Zobacz mój przykład jsfiddle.

Odpowiedz

4

Jak podano w documentation, pole nazwy jest nazwą punktu, jak pokazano w legendzie, etykiecie narzędzia, metce danych i tak dalej. I updated your fiddle, aby dołączyć bibliotekę highcharts i widzę to zachowanie (np. Po najechaniu kursorem na punkt, jego etykieta jest wyświetlana).

Jeśli chcesz poprawnie ustawić etykiety osi X, musisz upewnić się, że sekcja xAxis konfiguracji wykresu nie ma klucza categories.

+3

Twoje skrzypce nie działa dla mnie. Pokazuje tylko "Serię 1" w obu punktach. Być może aktualizacja biblioteki Highcharts złamała pożądane zachowanie? –

+0

Zaktualizowane skrzypce: http://jsfiddle.net/TkMjZ/288/ –

3

Można również wyświetlić nazwy w sekcji legendy. Zaktualizowany wybraną odpowiedź powyżej here

series: [{ 
     name: 'Point 1', 
     data: [[3, 3]] 
    }, { 
     name: 'Point 2', 
     data: [[4, 8]] 
    }, { 
     name: 'Point 3', 
     data: [[9, 15]] 
    }] 
+0

to wydaje się być jedyna odpowiedź, która faktycznie odpowiada na oryginalne pytanie! – Corone

+0

tak, to jest proste rozwiązanie problemu z pytaniem: –

3

Jest to nowa funkcja w HighCharts 3.0. Trzeba określić typ OśX do „kategoria” i podać nazwę punktu w danych, jeśli ma się pojawiać na OśX:

xAxis: { 
    //categories: ['Green', 'Pink'], 
    type: 'category' 
}, 
... 
data: [{ 
     name: 'Green', 
     x: 1, 
     y: 2 
    }, { 
     name: 'Pink', 
     x: 2, 
     y: 5 
    }] 

Zobacz kod jsFiddle aktualizacja: here. Zauważ, że dodałem funkcję formowania podpowiedzi, aby pokazać, że point.x nie ma więcej znaczenia w tym kontekście, tylko point.name pozostaje istotna.
Ponadto, nie można mieć dwóch punktów o różnych "nazwach" w tej samej pozycji x.

2

Ta odpowiedź działa w przypadku Highcharts 4.1.9.

Zajęło mi dużo czasu, aby dowiedzieć się, więc chcę go przekazać na wypadek, gdyby ktoś też tego szukał.

Twój przebieg może się różnić w przypadku innych wersji.

 plotOptions: { 
      scatter: { 
       dataLabels: { 
        format: "{point.name}", 
        enabled: true 
       }, 
       enableMouseTracking: false 
      } 
     }, 
     series: [{ 
      name: 'Projects', 
      data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}] 
     }] 

Jakie są kluczowe punkty?

  1. Upewnić się, że scatter.dataLabels jest włączona i format jest {point.name}
  2. Upewnij się, że dane są w formacie {"name":"Point 1", "x":1,"y":2}
+2

{point.key} zamiast {point.name} działa tutaj: tooltip: { headerFormat: '{series.name} ({point.key})
', pointFormat:' {point.x}, {point.y} ' } – bebbo

1

Jak wspomniano w this comment, co działa na mnie w Highcharts 5.0.6 to:

{ 
    type: 'scatter', 
    tooltip: { headerFormat: '<strong>{point.key}</strong><br>' }, 
    data: [{ x: 0, y: 1, name: 'Whatever' }, ...] 
} 
0

Zmagałem się z tym problemem i po znalezieniu rozwiązania w dokumentacji Muszę powiedzieć, że zachowanie, które zostało zaprojektowane, wydaje się nieco nieoczekiwane.

Per docs (tu: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip) tooltip nie pokazuje wszystkich pól, które można dodać do punktu danych, ale raczej

Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.

Aby wyświetlić nazwę punktu danych (i wszelkie inne pola chcesz), po prostu zmień HTML wyrenderowany przez etykietkę narzędziową. Na przykład można wyświetlić nazwę punktu i współrzędne w etykiecie narzędzia, usuwając nazwę serii w następujący sposób:

chart: { 
    type: "scatter", 
} 
tooltip: { 
    headerFormat: '', 
    pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>', 
}, 
Powiązane problemy