2017-05-01 22 views
0

編集:以下の回答は部分的に回答されましたが、最終的な解決に役立ちました。フィドルは私が欲しいもので更新されました。ここでChart.jsを使用したレーダーチャートの設定

は、私が働いているレーダーチャートです:https://jsfiddle.net/bigtrouble77/02p81jhr/4/

Chart.defaults.global.defaultFontColor = "#eee"; 

var radarData = { 
    labels: [ "Passing", "Positioning", "Stickhandling", "Wristship", 
"Determination", "Acceleration", "Speed" ], 
    datasets: [ 
    { 
     label: false, 
     data: [4, 6, 2, 3, 7, 9, 8], 
     backgroundColor: "rgba(220,220,220,0.2)", 
     borderColor: "#eee", 
     borderWidth: 1 
    } 
    ] 
}; 

var radarOptions = { 
    responsive: true, 
    maintainAspectRatio: true, 
    title: { 
    display: false 
    }, 
    legend: { 
    display: false, 
    } 
}; 

var ctx5 = document.getElementById("radarChart").getContext("2d"); 

new Chart(ctx5, { type: 'radar', data: radarData, options: radarOptions }); 

私は次の操作を実行するために、このチャートを設定する方法上の任意の情報を見つけるのは非常に困難な時期があった:

  • 増加をテキストのフォントサイズ
  • 「web」行の色を変更してください
  • 見苦しい縦のボックスを削除してください
  • は、スケールが1から20に変更されているため、20は常にデータセットの最高の数値ではなく、グラフの最高レベルになります。

私はどのようにこれを行うにはドキュメントの情報を見つけることができませんでした。以前のバージョンのChart.jsを使用していくつかの成功を収めましたが、APIが大幅に変更されたように見えるので、Chart.jsの最新バージョンでは動作しません。どんな助けでも大歓迎です。私はその設定をいじるを更新

var radarOptions = { 
     scale:{ 
     pointLabels: { 
     fontSize: 20 
     }, 
     }, 

    responsive: true, 
    maintainAspectRatio: true, 
    title: { 
    display: false 
    }, 
    legend: { 
    display: false, 
    } 
}; 

答えて

2

は単純に置き換えます。
+0

と私は見ていないよとフォントサイズに変更しますと – bstar

+0

新しいAPIバージョンで編集しました。これを試して。 –

+0

もう一度更新しましたが、変更はありません。 – bstar

関連する問題