ChartJS雷达刻度点 [英] ChartJS radar scale points

问题描述

我有一个雷达图（几乎）显示了我想要的。唯一的问题是，比例尺应该上升到20，但是，如下所示，突出显示的点是17，不在图表中。如何缩放比例，以便最大点将为20，并且显示的突出显示点将在图表内？

I have a radar chart showing (nearly) as I want it. The only problem is that the scale should go up to 20 but, as you can see below, the highlighted point is 17 and is off the chart. How do I scale it so that the max point would be 20 and the shown highlighted point would be inside the chart?

我当前拥有的代码是：

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 选项可以更改此设置，但似乎并没有影响。

I thought it would be the scaleSteps, scaleStepWidth and scaleStartValue options that would change this, but it doesn't seem to affect it.

编辑：：它似乎不会影响另一组数据...

It doesn't seem to affect another set of data...

您可以在此处看到该值17个中的确实位于图表中。此代码是：

As you can see here the value of 17 does sit within the chart. The code for this one is:

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] 
    } ] 
};

两者之间有什么区别？第二个值 ATT 的值为19，但它位于图表中就很好。

What is the difference between the 2? The second one has a value of 19 for ATT but it sits within the chart just fine.

推荐答案

好，我发现我需要移动 scaleSteps ， scaleStepWidth 和 scaleStart 到新的 Radar 图表的声明，如下所示，而不是在数据集中。

Ok, I figured out that I needed to move the scaleSteps, scaleStepWidth and scaleStart to the declaration of the new Radar chart as below, rather than in the dataset.

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/ 作为工作示例。

这篇关于ChartJS雷达刻度点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！