Chart.js - ホバーの後にデータポイントが小さくなる

Question

私はChart.jsを使用してレーダーグラフを作成しています。私は各データセットのデータポイントのサイズ（半径）を設定しました。私は、データポイントにカーソルを合わせるとしかし、半径が小さくなると、このように、その方法のaterwardsのまま：

は、ここで私は、グラフを生成する方法は次のとおりです。

new Chart($('#graph'), { 
    type: 'radar', 
    data: { 
     labels: ['a','b','c'], 
     datasets: [ 
      { 
       label: 'aaa', 
       data: [10,15,5], 
       backgroundColor: 'rgba(247, 151, 35, 0.5)', 
       borderColor: 'rgba(247, 151, 35, 1)', 
       pointBackgroundColor: 'rgba(247, 151, 35, 1)', 
       pointBorderColor: "#fff", 
       pointRadius: 5, 
       borderWidth: 1 
      } 
     ] 
    }, 
    options: { 
     scale: { 
      type: 'radialLinear', 
      ticks: { 
       // hide tick labels 
       display: false, 
       min: 0, 
       max: 20, 
       stepSize: 1 
      }, 
      gridLines: { 
       // hide lines 
       display: false 
      } 
     }, 
     legend: { 
      position: 'bottom' 
     } 
    } 
}); 

とここですhttps://jsfiddle.net/nj4qehLm/

どのようにデータポイントを設定したままにしておくことができますか？私はマウスを動かすと何も変わらないでしょうか？そして、なぜこれが最初に起こっているのですか？ Chart.jsは、あなたが問題を解決しますあなたのpointRadiusの同じ値に設定radiusプロパティを追加する必要がある可能性があるためpointRadius価値を尊重していないよういくつかの理由から

Answer 1

。

このような何か、

radius: 5, 
pointRadius: 5, 

ワーキングフィドル：https://jsfiddle.net/nj4qehLm/2/

HTMLコード：

<canvas id='graph' height=200 width=200></canvas> 

Javascriptのコード：

new Chart($('#graph'), { 
      type: 'radar', 
      data: { 
       labels: ['a','b','c'], 
       datasets: [ 
        { 
         label: 'aaa', 
         data: [10,15,5], 
         backgroundColor: 'rgba(247, 151, 35, 0.5)', 
         borderColor: 'rgba(247, 151, 35, 1)', 
         pointBackgroundColor: 'rgba(247, 151, 35, 1)', 
         pointBorderColor: "#fff", 
         radius: 5, 
         pointRadius: 5, 
         borderWidth: 1 
        } 
       ] 
      }, 
      options: { 
       scale: { 
        type: 'radialLinear', 
        ticks: { 
         // hide tick labels 
         display: false, 
         min: 0, 
         max: 20, 
         stepSize: 1 
        }, 
        gridLines: { 
         // hide lines 
         display: false 
        } 
       }, 
     legend: { 
        position: 'bottom' 
       } 
      } 
     }); 

これが役に立ちます。