3

fillColorを背景と同じに設定して、明確な円をマーカーとして「偽造」しました。それはうまく機能します。今、ホバーすると、円をシリーズの色で塗りつぶそうとしています。nullとして設定することはできません。それでは、背景色が静止したままになるためです。

何か案は？

これが私のチャートコードです（ライブバージョンはこちら：http：//jsbin.com/ukabob/2/edit）：

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            backgroundColor: '#E9E7DC'
        },
        colors: ['#A74B59', '#46C4B7', '#EDBA70'],
        credits: {
          enabled: false
        },
        title: {
            text: null
        },            
        xAxis: {
            categories: ['2013', '2014', '2015', '2016', '2017', '2018',
                '2019', '2020', '2021', '2022'],
            gridLineWidth:1,
            gridLineColor: '#FFFFFF',
            labels: {
              style: {
                color: '#000000'
              },
              formatter: function() {
                return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
                    this.value +'</div>';
              },
              y:25
            },
            lineColor: '#FFFFFF',
            tickColor: '#FFFFFF',
            tickLength: 30
        },
        yAxis: {
            gridLineWidth:0,
            title: {
                text: null
            },
            labels: {
              enabled: false
            }
        },
        plotOptions: {
          series: {
            marker: {
                radius: 6,
                fillColor: '#E9E7DC',
                lineWidth: 2,
                lineColor: null, // inherit from series
                symbol: 'circle',
                states: {
                    hover: {
                        fillColor: null,
                        lineWidth: 2,
                      radius:6
                    }
                }
            },
            states: {
              hover: {
                lineWidth:4
              }
            }
          }
        },
        tooltip: {
            borderWidth:0,
            borderRadius: 0
            },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Honeywell',
            data: [700,725,750,850,950,1000,1025,1050,1050,1050]
        }, {
            name: 'Bombardier',
            data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
        }, {
            name: 'Embraer',
            data: [747,789,839,861,890,908,984,1030,1097,1156]
        }]
    });
});

});
4

2 に答える 2

3

マーカーでfillColor: "white"を定義すると、ホバーまたは選択状態で、シリーズからデフォルト/元の色を取得できません。

あなたの問題を解決する方法を見つけました。lineWidth に高い値 (>= radius) を定義すると、ドット全体が塗りつぶされます。

series: [{    
  data: [],
  marker: {
    states: {
      hover: {
        fillColor: null,
        radius: 6,
        lineWidth: 6
      }
    }
  }
}]

ここに例があります: http://jsbin.com/majigera/1

遅い応答。これが誰かを助けることを願っています。

于 2014-06-17T22:18:57.223 に答える
2

これがどのように見えるかはわかりませんが、次の 2 つの方法があります。

  • 行間に空のスペースが必要で、ホバーでそのスペースを埋める場合は、次のソリューションを使用できます: http://jsbin.com/ukabob/3/editご覧のとおり、シリーズごとにマーカー オプションを設定する必要があります。 :

        series: [{    
        data: [],
        marker: {
            states: {
                hover: {
                  fillColor: yourColor
                }
            }
        }
    }]

  • 行間に空白を入れたくない場合は、マーカーの半径を 0 に設定できます。次を参照してください: http://jsbin.com/ukabob/5/edit

      plotOptions: {
      series: {
        marker: {
            radius: 0,
            lineColor: null, // inherit from series
            symbol: 'circle',
            states: {
                hover: {
                  fillColor: null,
                  fillColor: null,
                  lineWidth: 2,
                  radius: 6
                }
            }
        }
     }
  }
于 2013-02-06T13:50:41.963 に答える