2016-07-06 11 views
0

ちょっと私が特定のポイントをカラーにしたい場合は、現在のマーカのfillColorアトリビュートを使用して行うことができます。HighChartsでポイントをカラーリングする方法

しかし、ポイントをホバーすると、色がグラフのデフォルトの色に戻りますが、どのようにしてそのような効果を防ぐことができますか?

私はポイントは、(イベントとonhoverないイベントonhover)の状況の両方で、私はこの効果が発生するために変更する必要がない点につき何属性

赤になりたいですか?

以下のデモを追加しました:グラフのキャンバスをクリックすると、新しいグラフが生成され、最初の点は赤ですが、マウスを置くとデフォルトの色に戻ります。

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'spline', 
 
      margin: [70, 50, 60, 80], 
 
      events: { 
 
       click: function (e) { 
 
        // find the clicked values and the series 
 
        var x = e.xAxis[0].value, 
 
         y = e.yAxis[0].value, 
 
         series = this.series[0]; 
 
\t \t \t \t \t \t \t \t \t \t var chart = this; 
 
        this.addSeries({ 
 
      \t \t \t \t \t \t \t data: [{ x:x, y:y, marker:{radius: 5 , fillColor: "red" }},{x:(x*2), y:(y*2)}] 
 
     \t \t \t \t \t \t \t }) 
 
     \t 
 

 
       } 
 
      } 
 
     }, 
 
     title: { 
 
      text: 'User supplied data' 
 
     }, 
 
     subtitle: { 
 
      text: 'Click the plot area to add a point. Click a point to remove it.' 
 
     }, 
 
     xAxis: { 
 
      gridLineWidth: 1, 
 
      minPadding: 0.2, 
 
      maxPadding: 0.2, 
 
      maxZoom: 60 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Value' 
 
      }, 
 
      minPadding: 0.2, 
 
      maxPadding: 0.2, 
 
      maxZoom: 60, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     exporting: { 
 
      enabled: false 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       lineWidth: 1, 
 
       point: { 
 
        events: { 
 
         'click': function() { 
 
          if (this.series.data.length > 1) { 
 
           this.remove(); 
 
          } 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      data: [[20, 20], [80, 80]] 
 
     }] 
 
    }); 
 
});
<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/modules/exporting.js"></script> 
 

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

答えて

3

あなたはマーカーfillcolorのを設定している状態のオプションに追加します。

marker: { 
    radius: 5, 
    fillColor: 'red', 
    states: { 
     hover: { 
      fillColor: 'red', 
      } 
     } 
    } 
関連する問題