2016-03-22 1 views
1

Ich möchte alle Zeilen das gleiche Kreissymbol verwenden. HierKann man HighCarts zwingen, das Kreissymbol für alle Reihen in einem Liniendiagramm zu verwenden?

ist, was ich derzeit habe:

$TopChartJS = $(function() { 
    var chart = new Highcharts.Chart({ 
     colors: ["#cc1c0d", "#1d63af" , "#9eb215"], 
     chart: { 
      type: 'line\, 
      backgroundColor:'rgba(255, 255, 255, 0.85)', 
      renderTo: 'container' 
     }, 
     data: { 
      table: 'sheet6' 
     }, 
     title: { 
      text: 'Cost Comparison' 
     }, 
     xAxis: { 
      tickInterval:3, 
      title: { 
       text: 'Months' 
      }, 
     }, 
     plotOptions: { 
      series: { 
       marker: { 
        radius: 3, 
        fillColor: '#FFFFFF', 
        lineWidth: 2, 
        lineColor: null // inherit from series 
       }, 
       shadow: true 
      } 
     }, 
     yAxis: { 
      allowDecimals: false, 
      title: { 
       text: 'Cost [kUSD]' 
      }, 
      labels: { 
       formatter: function() { 
        return Highcharts.numberFormat(this.value,0); 
       } 
      } 
     }, 
     credits: { 
      enabled: false 
     }, 
     tooltip: { 
      headerFormat: '<b>{series.name}</b><br>', 
      pointFormat: 'Month {point.x}: {point.y} kUSD' 
     }, 

    }); 
}); 

Ich habe drei Serie in meinem Chart, und ich möchte sie alle das gleiche Kreissymbol verwenden, aber mit verschiedenen Farben.

Ich habe versucht, die Plotoptions Markersymbol Definition zu verschiedenen Abschnitten hinzuzufügen, aber das sieht nicht zu arbeiten und das Diagramm wird nicht mehr angezeigt.

Ist das überhaupt überhaupt möglich?

Antwort

1

Ja, Sie können die Darstellungsoptionen für den Marker als Kreis festlegen und er wird für alle Serien verwendet. Zum Beispiel (JSFiddle):

$('#container').highcharts({ 
    plotOptions: { 
     series: { 
      marker: { 
       symbol: 'circle' 
      } 
     } 
    }, 
    series: [{ 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }, { 
     data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
    }, { 
     data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
    }] 
}); 
Verwandte Themen