Конечная ось X в последней точке данных (точечная диаграмма) для числовых значений x, y

1

Когда я строю набор данных (x, y) с плавающей точкой на диаграмме рассеяния, используя ChartJS, я получаю дополнительное пространство на моей оси x из-за размера шага. Могу ли я заставить его закончить прямо на последней точке данных?

Изображение 174551

Я не установил никаких хороших ярлыков или легенды, так что извините за основной сюжет. Сначала я попытался сделать линейный график, который, как мне кажется, не имел бы этой проблемы, но я не смог передать набор данных (x, y) значений в формате:

elevation = [
    {
        x: 1,
        y: 2
    },
    {
        x: 2,
        y: 5
    }
]

По этой причине я решил использовать точечный график.

В настоящее время я отображаю свою точечную диаграмму следующим образом:

var ctx = document.getElementById("elevationProfile");
myLineChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Elevation Profile",
            data: elevation,
            showLine: true
        }]
    }
});

Но я не смог найти в документах или на Github ничего, что указывало бы на то, как этого добиться.

Я хотел бы, чтобы график выглядел так без пробела в конце:

Изображение 174551

Спасибо!

Теги:
chart.js

1 ответ

1
Лучший ответ

Я решил это в аналогичном проекте, используя атрибуты xAxe.ticks.min/max.

В вашем случае что-то вроде этого должно сработать:

if (elevation[0]){
    var minX = elevation[0]['x'];
    var maxX = elevation[elevation.length -1]['x'];
}

myLineChart = new Chart(ctx, {
  type: 'scatter',
  data: {
      datasets: [{
          label: "Elevation Profile",
          data: elevation,
          showLine: true
      }]
  },
  options: {
    ...
    scales: {
      xAxes: [{
        ticks:{
          min: minX,
          max: maxX,
        }
      }]
    },
    ...
  }
});
  • 0
    Приятно! Работает удовольствие, спасибо за это!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню