如何在Highcharts中为分组条形图添加标记?

时间:2017-07-07 21:22:30

标签: javascript highcharts

我正在使用Highcharts创建一个分组的条形图,并希望为每个条形图添加标记。

我创建了一个类似于我想要的多系列(条形+散射)图,但由于没有“分组散点图”,圆形标记居中(下面附带截图)。

有没有办法改变它,以便标记出现在与栏相同的行上?

Image

JSFiddle

Highcharts Config

{
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['One', 'Two', 'Three']
        },
        tooltip: {
                        enabled: true
        },
        series: [
          {
              name: '2015',
              data: [7, 8, 9]
          }, 
          {
              name: '2015 Goal',
              marker: {
                 symbol: 'circle'
              },
              data: [5, 6, 6],
              type:'scatter'
          },
          {
              name: '2016',
              data: [9, 9, 10]
          }, 
          {
              name: '2016 Goal',
              marker: {
                 symbol: 'circle'
              },
              data: [10,12,13],
              type:'scatter'
          }
        ]
    }

1 个答案:

答案 0 :(得分:1)

设置该点的x值。默认情况下,散点图的x值为整数 - 0,1,2,因此它们根据类别居中。你可以将它们稍微移动0.15,然后在pointFormatter中移动这些值。

import UIKit
import MapKit
import CoreLocation

class HotPlacesViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate {

@IBOutlet weak var mapView: MKMapView!
var isFirstTime = true

var locationManager = CLLocationManager()
let newPin = MKPointAnnotation()

var selectedLocation:LocationModel?

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.

    // Setup the location services delegate in this class.
    locationManager.delegate = self

    // This little method requests the users permission for location services whilst in this view controller.
    if CLLocationManager.authorizationStatus() == .notDetermined {
        self.locationManager.requestAlwaysAuthorization()
    let alert = UIAlertController(title: "You can change this option in the Settings App", message: "So keep calm your selection is not permanent. ",
                                  preferredStyle: .alert)

        alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))

        self.present(alert, animated: true, completion: nil)
    }

    locationManager.distanceFilter = kCLDistanceFilterNone
    locationManager.desiredAccuracy = kCLLocationAccuracyBest
    locationManager.startUpdatingLocation()

}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

}

// Drops the pin on the users current location.
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
    mapView.removeAnnotation(newPin)

    let location = locations.last! as CLLocation
    let center = CLLocationCoordinate2D(latitude: location.coordinate.latitude, longitude: location.coordinate.longitude)
    if(self.isFirstTime) {
    let region = MKCoordinateRegion(center: center, span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))

    // Set the region on the map.
    mapView.setRegion(region, animated: true)
    self.isFirstTime = false
    }

    newPin.coordinate = location.coordinate
    mapView.addAnnotation(newPin)

}
}

在pointFormatter中:

    series: [{
  name: '2015',
  data: [7, 8, 9]
}, {
  name: '2015 Goal',
  marker: {
    symbol: 'circle'
  },
  data: [
    [-0.15, 5],
    [1 - 0.15, 6],
    [2 - 0.15, 6]
  ],
  type: 'scatter'
}, {
  name: '2016',
  data: [9, 9, 10]
}, {
  name: '2016 Goal',
  marker: {
    symbol: 'circle'
  },
  data: [
    [0.15, 10],
    [1 + 0.15, 12],
    [2 + 0.15, 13]
  ],
  type: 'scatter'
}]

示例:http://jsfiddle.net/kh8b4jy3/