Highcharts：在悬停时更改Gauge Chart的针颜色

Question

http://jsfiddle.net/2egpa8eb/

unsigned char aBuffer[20];
NSString *myString = @"Test string.";
const char *utfString = [myString UTF8String];
NSData *myData = [NSData dataWithBytes: utfString length: strlen(utfString)];

[myData getBytes:aBuffer length:20];

我想改变＆＃34;针＆＃34;的颜色。在悬停和选择（见下图）。我已根据http://api.highcharts.com/highcharts#plotOptions.gauge.states中给出的api使用了上述选项，但它没有用。有没有办法实现这个目标？

Answer 1

您可以使用CSS在悬停上设置针的样式：

div.highcharts-container:hover g.highcharts-tracker > * {
  fill :#f00;
}

您需要确保div.highcharts-container对于您定位的图表是唯一的，因为此示例非常通用，例如您在同一页面上有多个图表或使用相同的CSS，例如，这个CSS会瞄准他们所有人。

我不确定您可以在这些图表上“选择”以回答您的第二个问题。

http://jsfiddle.net/2egpa8eb/1/

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false
    },

    title: {
      text: 'Speedometer'
    },

    plotOptions: {
      gauge: {
        allowPointSelect: true,
        states: {
          hover: {
            enabled: true,
            marker: {
              fillColor: "#FF0000",
              lineColor: "#0000FF",
              lineWidth: 5
            }
          }
        }
      }
    },

    pane: {
      startAngle: -150,
      endAngle: 150,
      background: [{
        backgroundColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, '#FFF'],
            [1, '#333']
          ]
        },
        borderWidth: 0,
        outerRadius: '109%'
      }, {
        backgroundColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, '#333'],
            [1, '#FFF']
          ]
        },
        borderWidth: 1,
        outerRadius: '107%'
      }, {
        // default background
      }, {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
      }]
    },

    // the value axis
    yAxis: {
      min: 0,
      max: 200,

      minorTickInterval: 'auto',
      minorTickWidth: 1,
      minorTickLength: 10,
      minorTickPosition: 'inside',
      minorTickColor: '#666',

      tickPixelInterval: 30,
      tickWidth: 2,
      tickPosition: 'inside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
        step: 2,
        rotation: 'auto'
      },
      title: {
        text: 'km/h'
      },
      plotBands: [{
        from: 0,
        to: 120,
        color: '#55BF3B' // green
      }, {
        from: 120,
        to: 160,
        color: '#DDDF0D' // yellow
      }, {
        from: 160,
        to: 200,
        color: '#DF5353' // red
      }]
    },

    series: [{
      name: 'Speed',
      data: [80],
      tooltip: {
        valueSuffix: ' km/h'
      }
    }]

  });
});

div.highcharts-container:hover g.highcharts-tracker > * {
  fill :#f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

Answer 2

您可以参考load事件，然后通过on声明附加自定义事件。

chart: {
        type: 'gauge',
        events:{
            load:function() {
            var chart = this,
                    graph = chart.series[0].data[0].graphic;

            graph
            .on('mouseover',function(){
                graph.attr({
                fill: 'red'
              });
            })
            .on('mouseout',function(){
                graph.attr({
                fill: 'black'
              });
            })
            .on('click', function() {
                graph.attr({
                fill: 'green'
              });
            });
          }
        }
    },

http://jsfiddle.net/6dbegyvs/