http://jsfiddle.net/2egpa8eb/Highcharts：ホバー
plotOptions: {
gauge: {
allowPointSelect: true,
states: {
hover: {
enabled: true,
marker: {
fillColor: "#FF0000",
lineColor: "#0000FF",
lineWidth: 5
}
}
}
}
},
私はホバー上の「針」の色を変更し、選択したいのゲージチャートの変更針の色は（下の画像を参照します）。私はhttp://api.highcharts.com/highcharts#plotOptions.gauge.statesで与えられたapiごとに上記のオプションを使用しましたが、動作しませんでした。これを達成する方法はありますか？
あなたはこのようにCSSを使ってホバーの針のスタイルを設定することができます
div.highcharts-container:hover g.highcharts-tracker > * {
fill :#f00;
}
あなたはこの例ではかなり一般的なものとしてdiv.highcharts-containerはあなたがターゲットとしているだけでチャートをユニークだったことを確認する必要がありますたとえば、同じページに複数の図表がある場合や、同じCSSを使用している場合、このCSSはすべてを対象とします。
私はあなたの2番目の質問に答えるために、これらの図表で "選択"できるものがよく分かりません。
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>なぜ、州のオプションはapiで指定されていますか？どのようなものを私は変更することができます/フォーマット "ホバー"と "選択" APIによると？ – sagargurtu
ニードルの書式を「ダイヤル」で編集しますが、ホバー上でダイヤルを書式設定するか、次の項目を選択するオプションはありません：http://api.highcharts.com/highcharts#plotOptions.gauge.dial – wf4
あなたは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'
});
});
}
}
},
ありがとう。次に、シリーズオプションのホバーとセレクトの状態は正確には何のために使われますか？ APIで指定されたオプションを使用することで、私たちは何ができますか？ – sagargurtu
これは、attr（）オブジェクトで定義されていないスタイルを適用する回避策です。シリーズのオプションから抽出されるわけではありません。 –
あなたは国境や他の "ポインタ" をツールチップを意味するのですか？より詳細に何が起こるべきかを詳述できますか？ –
@SebastianBochan問題の理解を深めるために画像を追加しました – sagargurtu