Обновление точки на графике JS динамически обновляет только значение y

Question

У меня есть линейный график с точкой, которую я пытаюсь анимировать по линии. Когда я обновляю диаграмму путем непосредственного изменения значений x и y точек данных, на холсте обновляется только значение y. Однако, если я проверяю экземпляр диаграммы в консоли, значения x и y точки данных действительно обновляются до новых значений. Если я проверю точку данных на холсте с помощью всплывающей подсказки, вы увидите, что обновляется только значение y. Любые идеи?

// Data.
const dataset1 = [{ 'x': 29.0, 'y': 0.2686622628222965 },
{ 'x': 30.0, 'y': 1.6875564015713724 },
{ 'x': 31.0, 'y': 3.927335271321925 },
{ 'x': 32.0, 'y': 6.116677743682844 },
{ 'x': 33.0, 'y': 8.305688276805473 },
{ 'x': 34.0, 'y': 10.494369219774036 },
{ 'x': 35.0, 'y': 12.68059810657068 },
{ 'x': 36.0, 'y': 14.8711001192293 },
{ 'x': 37.0, 'y': 17.059239571115175 },
{ 'x': 38.0, 'y': 19.247118637561453 },
{ 'x': 39.0, 'y': 21.434670568612262 },
{ 'x': 40.0, 'y': 23.619730722191015 }];

// Options.
const getTsOptions = (tMin, tMax, tStep) => {
  return {
    scaleShowVerticalLines: false,
    animation: false,
    legend: { display: false },
    maintainAspectRatio: false,
    responsive: true,
    scales: {
      xAxes: [{
        display: false,
        gridLines: {
          color: "rgba(0,0,0,0)",
          display: true
        },
        tickOptions: { showGridline: true }
      }
      ],
      yAxes: [
        {
          display: true,
          gridLines: {
            color: 'white',
            display: true,
            borderDash: [2],
            lineWidth: 0.5,
            drawBorder: false,
            zeroLineColor: 'white'
          },
          ticks: {
            min: tMin,
            max: tMax,
            stepSize: tStep,
            fontColor: "white"
          }
        }
      ]
    },
    tooltips: { enabled: true }
  };
};


// TS chart 1.
var myTSChart1 = new Chart(tsNode1, {
  type: "line",
  data: {
    labels: dataset1.map(datapoint => datapoint.x),
    datasets: [{
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgb(204, 204, 204)", // Line color
      borderWidth: 3,
      pointRadius: 0.0,
      data: dataset1,
    },
    {
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgb(204, 204, 204)", // Line color
      borderWidth: 3,
      pointRadius: 5.0,
      data: [{ x: 0, y: 0 }],
    }]
  },
  options: getTsOptions(0, 25, 5)
});

и в oop, обновитель:

myTSChart1.data.datasets[1].data[0].x =  newTime;
myTSChart1.data.datasets[1].data[0].y =  newVelocity;
myTSChart1.update();

РЕДАКТИРОВАТЬ

Я сделал еще несколько отладки- похоже, что если я округлю значение x до значения, которое находится в метках, оно обновится. Я все еще не понимаю, почему я не смог построить значение, скажем, значение x 35,345345 ...

Answer 1

хорошо, я думаю, диаграмма. js не нравится, когда вы обновляете точку данных для метки, которой нет в исходном экземпляре, то есть, если вы не используете новую диаграмму. js шкала времени. так что я сделал, чтобы убедиться, что все значения, которые я ожидаю при получении точки данных, имеют свои значения х в метках Вероятно, есть более элегантный способ сделать это, но сейчас это мой хак.