react + chartjs のレーダーチャートをカスタマイズをしたいです。
レーダーチャート(下記の画像)
の 20, 40, 80 ・・・100 となっている目盛りラベルを取りたいのですが、うまくいきません。
プラグインは下記を使って、実現しようとしています。
react-chartjs-2
charts-plugin-datalabels
(ラベル用の公式プラグインがあるそうです。先ほど、こちらで学びました!)
ソースコード
JavaScript
1import React from 'react' 2import PropTypes from 'prop-types' 3import { Radar } from 'react-chartjs-2' 4 5 6class ChartRadar extends React.Component { 7 render() { 8 const data = { 9 labels: ['A', 'B', 'C', 'D', 'E'], 10 datasets: [ 11 { 12 label: 'hoge', 13 backgroundColor: 'rgba(255,99,132,0.2)', 14 borderColor: 'rgba(255,99,132,1)', 15 pointRadius: 0, 16 data: [65, 59, 90, 81, 56] 17 }, 18 { 19 label: 'fuga', 20 backgroundColor: 'rgba(81, 158, 235,0.2)', 21 borderColor: 'rgba(81, 158, 235,1)', 22 pointRadius: 0, 23 data: [28, 48, 40, 19, 96] 24 } 25 ] 26 } 27 28 return ( 29 <div className="area_radar"> 30 31 <Radar 32 data={data} 33 options={{ 34 maintainAspectRatio: false, 35 legend: { 36 display: false 37 }, 38 scale: { 39 gridLines: { 40 color: ['#f5eec1'] 41 }, 42 pointLabels: { 43 fontSize: 8 44 }, 45 ticks: { 46 beginAtZero: true, 47 stepSize: 20, 48 max: 100, 49 scaleFontSize: 10 50 } 51 }, 52 plugins: { 53 datalabels: { 54 display: false 55 } 56 } 57 }} 58 /> 59 </div> 60 ); 61 } 62} 63 64ChartRadar.propTypes = { 65 ChartRadar: PropTypes.node 66} 67 68export default ChartRadar
chart.jsのサイトを読んでみると、おそらく以下の2つを設定するのかなぁ、と検討はついたのですが
scaleOverride: true,
scaleShowLabels: false
入れては試してみましたが、うまく行きません。
お詳しい方、ご指導いただけますと幸いです。
何卒宜しくお願いたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/15 15:04