Создайте собственную диаграмму с помощью точечной диаграммы. js - PullRequest
Новая
       9

Создайте собственную диаграмму с помощью точечной диаграммы. js

0 голосов
/ 05 февраля 2020

Я хотел бы создать диаграмму как можно ближе к изображению:

enter image description here

Зеленый / красный квадрат может быть зеленым / красным точка, это было бы хорошо.

Самая близкая диаграмма, которую я нашел в inte rnet, является диаграммой рассеяния из диаграммы. js.

Я немного отредактировал диаграмму, но я Не удается получить желаемый результат.

Кто-нибудь знает, как изменить код диаграммы рассеяния, чтобы получить желаемый результат?

Вот код: 

var scatterChartData = {
  datasets: [{
    label: "Results",
    data: [{
      x: 118.2,
      y: 15.2,
    }]
  }]
};
$.each(scatterChartData.datasets, function(i, dataset) {
  dataset.borderColor = (0, 255, 13);
  dataset.backgroundColor = (0, 255, 13);
  dataset.pointBorderColor = (0, 255, 13);
  dataset.pointBackgroundColor = (0, 255, 13);
  dataset.pointBorderWidth = 12;
});

var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
  data: scatterChartData,
  options: {
    title: {
      display: true,
      text: 'SF RESULTS'
    },
    scales: {
      xAxes: [{
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(36, 36, 35,1)"
        },
        ticks: {
            beginAtZero: true,
            suggestedMin: 1,
          suggestedMax: 360,
          maxTicksLimit: 3
        },
        scaleLabel: {
          display: true,
          labelString: 'Angle(º)'
        }
      }],
      yAxes: [{
        position: 'left',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        ticks: {
            beginAtZero: true,
            suggestedMin: 12.7500,
          suggestedMax: 17.2500,
          maxTicksLimit: 3
        },
        scaleLabel: {
          display: true,
          labelString: '(N/m)'
        }
      }]
    }
  }
});

https://jsfiddle.net/2xwvkz8r/2/
...