2016-05-18 10 views
0

これは間違った場所ですが、chart.js gitがこれを唯一のサポートを受ける場所として提案していることをお詫び申し上げます。Chart.jsバージョン1の違いとバージョン2で達成できますか?

私は最近のプロジェクトのためchart.jsのバージョン1を使用し、私は理由は単純/容易なユーザーエクスペリエンスの他のものより、このライブラリを選びました。線グラフの例として、x軸上にマウスを置くと、ホバーに最も近い点が強調表示されます。バージョン2では、実際のポイントにカーソルを移動する必要があります。それはchart.jsとhighcharts.jsのような他のライブラリの両方で、他のグラフの種類と同様の状況です。

私の質問は簡単です、我々は、バージョン2にバージョン1のユーザビリティを複製することができますか、我々は完全にこの点を失っていますか? ドキュメントを参照することは可能ではないようです。

答えがノーであれば、周りに保たれている私は、2つのうちの1つが起こることを示唆している場合も、どちらかそれは、バージョン2またはBバージョン1用に開発されています。

答えて

1

あなたはとても

Chart.defaults.myLine = Chart.helpers.clone(Chart.defaults.line); 
Chart.controllers.myLine = Chart.controllers.line.extend({ 
    updateElement: function (point) { 
     var result = Chart.controllers.line.prototype.updateElement.apply(this, arguments); 
     point.inRange = function (mouseX, mouseY) { 
      var vm = this._view; 
      // ignore the y coordinate 
      return vm ? (Math.abs(mouseX - vm.x) < (vm.hitRadius + vm.radius)) : false; 
     }; 
     return result; 
    } 
}); 

、その後

... 
    type: 'myLine', 
    ... 
    options: { 
     tooltips: { 
      mode: 'label' 
     } 
    } 
}; 

のようなフィドル、lineチャートタイプを拡張し、labelにツールチップモードを設定することにより、V1.Xの機能を複製することができます - http://jsfiddle.net/gyqmbL2q/

+0

linの周りの距離を設定できますかv1のようにpointHitDetectionRadiusでe?あなたの答えははるかに優れていますが、依然としてマウスの精度が必要です。 –

+0

うん、http://www.chartjs.org/docs/で 'point.hitRadius'を探すだけです。 http://jsfiddle.net/m0vrqtg5/ – potatopeelings

+0

を参照してください。優れていますが、これを行う簡単な方法がありましたが、それを拡張することは実際にはうまくいきます。私は開発者がこれを見ることを願って、これをトグルする簡単なオプションにすることを検討します。 –

関連する問題