2014-10-16 2 views
1

У меня есть радарная диаграмма, показывающая (почти), как я хочу. Единственная проблема заключается в том, что масштаб должен увеличиться до 20, но, как видно ниже, выделенная точка равна 17 и находится вне графика. Как его масштабировать так, чтобы максимальная точка составляла 20, а выделенная выделенная точка была бы внутри диаграммы?Точки радара ChartJS

enter image description here

Текущий код у меня есть:

var radarChartData = { 
    labels: ["ATT", "SPD", "POW", "DEF", "STA", "TEC"], 
    datasets: [ { 
     scaleOverride: true, 
     scaleSteps: 5, 
     scaleStepWidth: 5, 
     scaleStartValue: 0, 
     pointLabelFontSize: 16, 
     fillColor: "rgba(0,120,0,0.2)", 
     strokeColor: "rgba(0,120,0,1)", 
     pointColor: "rgba(10,10,10,1)", 
     pointStrokeColor: "#ccc", 
     pointHighlightFill: "#333", 
     pointHighlightStroke: "rgba(255,255,0,1)", 
     data: [12,15,17,16,11,13] 
    } ] 
}; 

Я думал, что это было бы в scaleSteps, scaleStepWidth и scaleStartValue варианты, которые бы изменить это, но это, кажется, не влияет на это.

EDIT: Это, кажется, не влияет на другой набор данных ...

enter image description here

Как вы можете видеть здесь значение 17 делает сидеть в графике. Код для этого:

var radarChartData = { 
    labels: ["ATT", "SPD", "POW", "DEF", "STA", "TEC"], 
    datasets: [ { 
     scaleOverride: true, 
     scaleSteps: 5, 
     scaleStepWidth: 5, 
     scaleStartValue: 0, 
     pointLabelFontSize: 16, 
     fillColor: "rgba(0,120,0,0.2)", 
     strokeColor: "rgba(0,120,0,1)", 
     pointColor: "rgba(10,10,10,1)", 
     pointStrokeColor: "#ccc", 
     pointHighlightFill: "#333", 
     pointHighlightStroke: "rgba(255,255,0,1)", 
     data: [19,17,15,6,16,15] 
    } ] 
}; 

В чем разница между 2? Второй имеет значение 19 для ATT, но он очень хорошо сидит внутри диаграммы.

ответ

8

Хорошо, я понял, что мне нужно, чтобы переместить scaleSteps, scaleStepWidth и scaleStart к объявлению нового Radar диаграммы, как показано ниже, а не в наборе данных.

window.onload = function(){ 
var ctx = document.getElementById("radarCanvas").getContext("2d"); 
window.myRadar = new Chart(ctx).Radar(radarChartData, { 
responsive: false, 
    pointDot:false, 
    showTooltips: false, 
    scaleOverride: true, 
    scaleSteps: 4, 
    scaleStepWidth: 5, 
    scaleStartValue: 0 
}); } 

См. http://jsfiddle.net/7p8ffvqx/ для рабочего примера.

+0

Спасибо. Работал для меня :) –

Смежные вопросы