Highcharts: spezielle marker auf dem Säulendiagramm

Möchte ich Marker auf ein Säulendiagramm.

Um genau zu sein die Grafik ist ein für die erzielten runs in jedem über in das Spiel der cricket. (eine Probe generierte Grafik als jetzt: http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)

Nun, was ich eigentlich will, ist eine Sendung, in der über die wicket fiel (so etwas wie: http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png), die blauen Punkte auf der Oberseite der Säulen.

Ist es möglich, dies zu erreichen in highcharts?
Ich sehe einen Ausschnitt aus diesem Diagramm (so etwas wie Sonne hier dargestellt: http://www.highcharts.com/demo/spline-symbols).

  • Wäre cool, wenn Sie akzeptieren könnten, Sie sich eine der folgenden Antworten 🙂
InformationsquelleAutor Shamail Tayyab | 2011-11-17
  1. 16

    Ich hatte eine ähnliche Herausforderung, wo ich brauchte, um Besondere Symbole auf der Oberseite meiner Spalten:

    Highcharts: spezielle marker auf dem Säulendiagramm

    Um dies zu erreichen, verwendete ich die formatter callback:

    plotOptions: {
  column: {
    dataLabels: {
      enabled: true,
      useHTML: true,
      formatter: function() {
        return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>'; 
      },
      y: 0
    }
  }
}

    Wie Sie sehen können, Sie könnten dann dynamisch legen Sie einen Pfad für das Bild oder element-Klasse, basierend auf was auch immer Ihre x - /y - /- Serie/Punkt/insgesamt/Prozentsatz Wert ist.

    Schließlich müssen Sie zudem die Erhöhung der maxPadding für die yAxis, andernfalls sind die Symbole/Werte werden abgeschnitten (je nach icon-Größe, natürlich).

    Zu sehen, Sie in Aktion einige "dynamische" Platzhalter-Bilder, haben Sie einen Blick auf dieses jsFiddle:
    http://jsfiddle.net/DMCXS/

    InformationsquelleAutor Patrik Affentranger
  2. 10

    Können Sie zwei in Reihe, ersten Spalte, die zweite Streuung mit kundenspezifischen marker.

    Beispiel: http://jsfiddle.net/NDpu6/

     series: [{
            name: 'Tokyo',
            type:'column',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            type: 'scatter',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }]
    • Nett, vor allem, weil es funktioniert mit rHighcharts, wie gut!
    • Wow, Super einfache Lösung. Wünschte, ich hätte früher daran gedacht suchen, um überhaupt die komplexer sind.
    InformationsquelleAutor Sebastian Bochan
  3. 4

    In der data array Sie können Optionen festlegen, für einen bestimmten Punkt (wie eine benutzerdefinierte Marke zu zeigen):

    [...]
 series: [{
         name: 'Tokyo',
         marker: {
            symbol: 'square'
         },
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{
            y: 26.5,
            marker: {
               symbol: 'url(/demo/gfx/sun.png)'
            }
         }, 23.3, 18.3, 13.9, 9.6]

      },
[...]

    Trotzdem glaube ich nicht möglich ist, setzen Sie die Markierung über das Diagramm-element.

    http://www.highcharts.com/ref/#point-marker

    • Die Anfrage wurde über Säulendiagramme, die Marker sind nur sichtbar im Linien-und Flächendiagramme...
    InformationsquelleAutor mamoo
Schreibe einen Kommentar