Thiết kế website giá rẻ

Question

In reference to an question I asked before.

How to get radar chart coordinates using getValueForDistanceFromCenter with Chart.js?

I would like to rotate the arrow like a clock based on degrees. I can produce the arrow on the endpoint at the bottom of the cricle, but I cannot calculate new end points based on degrees on the circleradius. I tried to use sin and cosinus based on an x-y axis. See code

ctx.beginPath();
ctx.arrow(
  xScale.getPixelForValue(0),
  yScale.getPixelForValue(0.0),
  xScale.getPixelForValue(8 * xline90),
  yScale.getPixelForValue(8 * yline90),
  [0, 0.75, -15, 0.75, -15, 10]
);
ctx.fill();

var xline90 = Math.sin((Math.PI * 2 * 120) / 360);
var yline90 = Math.cos((Math.PI * 2 * 120) / 360);

For the radarchart I use getPointPositionForValue, but when I apply the above sinus and cosinus the arrow ends up on a random point on the canvas.
I also tried to use rotate but I also could not get that to work.

Could somebody point me in the right direction? Or is het impossible what I want to do?

    var mobilewidth = 420;
var backgroundcolor = "transparent";

var titleshow = true;
var titletext = [
  "Example"
];
var titleshowmob = true;
var titlecolor = "rgba(75,75,75,1)";
var titlesize = 15;
var titlesizemob = 9;
var titleweight = "600";
var titlefont = "sans-serif";

var anglelinecolor = "rgba(120,120,120,1)";
var anglelinewidth = 2;

var resultcustomer = 4;
var resultoperational = 9;
var resultproduct = 10;

var resultbackgroundcolor = "rgba(247,70,74,0.2)";
var resultlinecolor = "rgba(247,70,74,1)";
var resultlinewidth = 2;
var resultpoint = 2;
var resultpointwidth = 3;

var pointlabelcolor = "rgba(75,75,75,1)";
var pointlabelsize = 15;
var pointlabelsizemob = 9;
var pointlabelweight = "600";
var pointlabelfont = "sans-serif";
var pointlabelalign = "center";
var pointlabelpadding = 10;

var ringbackgroundinner = "rgba(195,195,195,1)";
var ringbackgroundmiddle = "rgba(225,225,225,1)";
var ringbackgroundouter = "rgba(254,254,254,1)";
var ringbordercolor = "rgba(120,120,120,1)";
var ringborderdash = [6, 4];
var ringborderwidth = 1.5;

var ctx = document.getElementById("myChart");
var data = {
  labels: [
    ["test"],
    ["test2"],
    ["test3"]
  ],
  datasets: [
    {
      label: "nvt",
      backgroundColor: "rgba(38,120,255,0.2)",
      borderColor: "rgba(38,120,255, 1)",
      pointRadius: 0,
      data: [, 0]
    },
    {
      label: "Score",
      data: [resultcustomer, resultproduct, resultoperational],
      borderWidth: resultlinewidth,
      pointRadius: resultpoint,
      pointBorderWidth: resultpointwidth,
      backgroundColor: resultbackgroundcolor,
      borderColor: resultlinecolor
    }
  ]
};

var options = {
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false
    },
    title: {
      display: function () {
        if (window.innerWidth < mobilewidth) {
          return titleshowmob;
        } else {
          return titleshow;
        }
      },
      color: titlecolor,
      font: {
        size: function () {
          if (window.innerWidth < mobilewidth) {
            return titlesizemob;
          } else {
            return titlesize;
          }
        },
        weight: titleweight,
        family: titlefont
      },
      text: titletext
    }
  },
  scales: {
    r: {
      angleLines: {
        color: anglelinecolor,
        borderWidth: anglelinewidth
      },
      pointLabels: {
        color: pointlabelcolor,
        padding: pointlabelpadding,
        font: {
          size: function () {
            if (window.innerWidth < mobilewidth) {
              return pointlabelsizemob;
            } else {
              return pointlabelsize;
            }
          },
          weight: pointlabelweight,
          family: pointlabelfont
        }
      },
      min: 1,
      max: 10,
      ticks: {
        display: false
      },
      grid: {
        display: false,
        circular: true
      }
    }
  }
};

var plugin1 = {
  beforeDraw(chart) {
    var c = chart.ctx;

    c.save();
    c.globalCompositeOperation = "destination-over";
    c.fillStyle = backgroundcolor;
    c.fillRect(0, 0, chart.width, chart.height);
    c.restore();

    var rScale = chart.scales.r;
    var xline0 = Math.sin(340);
    var yline0 = Math.cos(340);
    chart.data.datasets[0].data.forEach(function (item, index) {
      var circle3 = rScale.getPointPositionForValue(0.5 + index, 10);
      var base = rScale.getPointPositionForValue(0.5 + index, 1);

      c.beginPath();
      c.lineWidth = ringborderwidth;
      c.fillStyle = ringbackgroundouter;
      c.arc(base.x, base.y, circle3.y - base.y, 0, 2 * Math.PI);
      c.setLineDash(ringborderdash);
      c.strokeStyle = ringbordercolor;
      c.stroke();
      c.fill();

      c.save();
      c.beginPath();
      c.fillStyle = "black";
      c.arrow(base.x, base.y, circle3.x, circle3.y, [
        0,
        5,
        -15,
        5,
        -15,
        10
      ]);

      c.fill();
      c.restore();

    });
  }
};

var myChart = new Chart(ctx, {
  type: "radar",
  data: data,
  options: options,
  plugins: [plugin1]
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://frogcat.github.io/canvas-arrow/canvas-arrow.js"></script>
<html>
<canvas id="myChart" />

</html>

Thiết kế website giá rẻ

Danh mục

Rotate arrow radial axis radarchart cjart.js