GWT Highcharts - 帶有符號的樣條圖

我們已經在 Highcharts 配置語法 章節中看到了用於繪製此圖表的配置。下面讓我們考慮下面的示例來進一步瞭解帶有符號的樣條圖。

配置

使用 marker.symbol 屬性向圖表的系列新增符號。該屬性可以是預先配置的符號（例如“方形”、“菱形”）或圖片網址。標記還可以新增到系列資料中的任意位置。

chart.createSeries()  
   .setName("Tokyo")  
   .setPlotOptions(  
      new SplinePlotOptions()  
      .setMarker(  
         new Marker()  
            .setSymbol(Marker.Symbol.SQUARE)  
      )  
   )  

示例

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsData;
import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter;
import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.SplinePlotOptions;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
         xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature °C");
      yAxis.setLabels(
         new YAxisLabels()
         .setFormatter(new AxisLabelsFormatter() {
            @Override
            public String format(AxisLabelsData axisLabelsData) {
               return axisLabelsData.getValueAsLong() + "°";  
            }
         })
      );

      ToolTip toolTip = new ToolTip(); 
      toolTip.setValueSuffix("°C")
         .setCrosshairs(true)
         .setShared(true);

      chart.setToolTip(toolTip);

      chart.setSplinePlotOptions(new SplinePlotOptions()  
         .setMarker(  
         new Marker()  
            .setRadius(4)  
            .setLineColor("#666666")  
            .setLineWidth(1)  
         )  
      );  

      chart.addSeries(  
         chart.createSeries()  
            .setName("Tokyo")  
            .setPlotOptions(  
               new SplinePlotOptions()  
               .setMarker(  
                  new Marker()  
                  .setSymbol(Marker.Symbol.SQUARE)  
               )  
            )  
         .setPoints(  
            new Point[]{  
               new Point(7.0),  
               new Point(6.9),  
               new Point(9.5),  
               new Point(14.5),  
               new Point(18.2),  
               new Point(21.5),  
               new Point(25.2),  
               new Point(26.5)  
               .setMarker(  
                  new Marker()  
                     .setSymbol("http://highcharts.com/demo/gfx/sun.png")  
               ),  
               new Point(23.3),  
               new Point(18.3),  
               new Point(13.9),  
               new Point(9.6)  
            }  
         )  
      );  

      chart.addSeries(     
         chart.createSeries()  
            .setName("London")  
            .setPlotOptions(  
               new SplinePlotOptions()  
                  .setMarker(  
                     new Marker()  
                        .setSymbol(Marker.Symbol.DIAMOND)  
                  )  
            )     
            .setPoints(  
               new Point[]{  
                  new Point(3.9)  
                  .setMarker(  
                     new Marker()  
                        .setSymbol("http://highcharts.com/demo/gfx/snow.png")  
                  ),  
                  new Point(4.2),  
                  new Point(5.7),  
                  new Point(8.5),  
                  new Point(11.9),  
                  new Point(15.2),  
                  new Point(17.0),  
                  new Point(16.6),  
                  new Point(14.2),  
                  new Point(10.3),  
                  new Point(6.6),  
                  new Point(4.8),  
               }  
            )  
      );  
      RootPanel.get().add(chart);
   }
}

結果

驗證結果。