декартова система координат с chart.js

Я пытаюсь создать декартову систему координат (т.е. для координатной геометрии) с помощью chart.js. В документации фактически указаны декартовы оси, но я не вижу никаких доказательств того, что такое название оправдано. Моя диаграмма выглядит следующим образом:

    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var scatterChart = new Chart(ctx, {
      type: 'scatter',
      data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{x:-3,y:5},{x:-2,y:0},{x:-1,y:-3},{x:0,y:-4},{x:1,y:-3},
            {x:2,y:0},{x:3,y:5}]
        }]
      },
      options: {
        scales: {
          xAxes: [{
              type: 'linear',
          ticks: {
            stepSize: 1
          }
          }],yAxes: [{
              type: 'linear',
          ticks: {
            stepSize: 1
          }
          }]
        }
      }
    });
    </script>

Проблема в том, что оси не проходят через начало координат (0,0). Они смещены в сторону, как и любой другой обычный график. Кто-нибудь знает, как двигать оси?

Я попытался установить положение осей, но единственные варианты - «верх», «низ», «левый» и «правый». Нет "середины", "центра", "начала" и т. Д. Я также пробовал установить смещение метки, но это не смещается в правильном направлении (метки x перемещаются в направлении x, метки y перемещаются в направлении y - I нужно обратное), а это в любом случае только перемещение ярлыков.


chart.js axes coordinate-systems cartesian-coordinates
person Normajean    schedule 31.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать Plugin Core API, который предлагает ряд ловушек, которые можно использовать для выполнения пользовательского кода. Например, в beforeDraw вы можете вычислить и установить ticks.padding < / a> обеих осей, чтобы переместить ticks в желаемое положение.

beforeDraw: chart => {
  var xAxis = chart.scales['x-axis-1'];
  var yAxis = chart.scales['y-axis-1'];
  const scales = chart.chart.config.options.scales;
  scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
  scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
}

Пожалуйста, взгляните на свой измененный код и посмотрите, как он работает.

new Chart('myChart', {
  type: 'scatter',
  plugins:[{
    beforeDraw: chart => {
      var xAxis = chart.scales['x-axis-1'];
      var yAxis = chart.scales['y-axis-1'];
      const scales = chart.chart.config.options.scales;
      scales.xAxes[0].ticks.padding = yAxis.top - yAxis.getPixelForValue(0) + 6;
      scales.yAxes[0].ticks.padding = xAxis.getPixelForValue(0) - xAxis.right + 6;
    }
  }],
  data: {
    datasets: [{
      label: 'Scatter Dataset',
      data: [{x:-3,y:5},{x:-2,y:0},{x:-1,y:-3},{x:0,y:-4},{x:1,y:-3},{x:2,y:0},{x:3,y:5}],
      borderColor: 'red'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          min: -6,
          max: 6,
          stepSize: 1,
          callback: v => v == 0 ? '' : v
        },
        gridLines: {
          drawTicks: false
        }        
      }],
      yAxes: [{
        ticks: {
          min: -6,
          max: 6,
          stepSize: 1,
          callback: v => v == 0 ? '' : v
        },
        gridLines: {
          drawTicks: false
        } 
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

person uminder    schedule 02.08.2020