Работа с диаграммами в движении [Анимационная диаграмма]

Question

Я создал диаграмму областей с использованием библиотеки высоких диаграмм и анимировал ее с помощью перехода между кнопками воспроизведения / паузы между неделями данных

Ссылка. https://www.highcharts.com/blog/tutorials/176-charts-in-motion/

jsfiddle Ref. https://jsfiddle.net/larsac07/wkev75nL/?utm_source=website&utm_medium=embed&utm_campaign=wkev75nL

В приведенном выше примере мы анимируем график на недельной основе

dataSet используется:

dataSequence = [
        {
            name: 'Week 1',
            data: [1, 2, 2, 1, 1, 2, 2]
        }, {
            name: 'Week 2',
            data: [6, 12, 2, 3, 3, 2, 2]
        }, {
            name: 'Week 3',
            data: [4, 5, 6, 5, 5, 4, 9]
        }, {
            name: 'Week 4',
            data: [5, 5, 6, 6, 5, 6, 6]
        }, {
            name: 'Week 5',
            data: [6, 7, 7, 6, 6, 6, 7]
        }, {
            name: 'Week 6',
            data: [8, 9, 9, 8, 8, 8, 9]
        }, {
            name: 'Week 7',
            data: [9, 10, 4, 10, 9, 9, 9]
        }, {
            name: 'Week 8',
            data: [1, 10, 10, 10, 10, 11, 11]
        }, {
            name: 'Week 9',
            data: [11, 11, 12, 12, 12, 11, 11]
        }
    ]

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

xAxis = ["week1", "Week2", ..... ],
yAxis = [[1,2,3,4,5,6,7,8,9,10,11], [3,5,7,8,2,1,5,7,6,1,10], ....]

; на кнопке воспроизведения она будет проходить между week1, затем будет go до week 2 и так до последней недели номер доступен.

Попытка получить что-то вроде этого Ref. https://aatishb.com/covidtrends/

эта диаграмма построена с использованием этого набора данных для серии

Highcharts.chart("container", {
      chart: {
        type: "areaspline"
      },
      tooltip: {
        shared: true,
        valueSuffix: " units"
      },
      xAxis: {
        categories: [
          "Week 1",
          "Week 2",
          "Week 3",
          "Week 4",
          "Week 5",
          "Week 6",
          "Week 7"
        ]
      },
      yAxis: {
        title: {
          text: "Efficiency Index"
        }
      },
      legend: {
        layout: "horizontal",
        align: "right",
        verticalAlign: "top",
        x: 50,
        y: 50,
        floating: true,
        borderWidth: 1,
        backgroundColor:
          (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
          "#FFFFFF"
      },
      plotOptions: {
        areaspline: {
          fillOpacity: 0.5
        }
      },
      credits: {
        enabled: false
      },
      series: [
        {
          name: "By week",
          data: dataSequence[value].data.slice()
        },
        {
          type: "spline",
          name: "Topic 1",
          data: [3, 2, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 2",
          data: [1, 5, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 3",
          data: [3, 7, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 4",
          data: [5, 1, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 5",
          data: [7, 3, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 6",
          data: [9, 2, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 7",
          data: [11, 8, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 8",
          data: [13, 11, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 9",
          data: [15, 7, 1, 3, 4, 7, 8]
        },
        {
          type: "spline",
          name: "Topic 10",
          data: [7, 5, 1, 3, 4, 7, 8]
        }
      ],
      title: {
        text: ""
      },
      subtitle: {
        text: "Efficiency Index of Topics"
      }
    });

эта моя функция обновления в реаги

update(increment) {
    var input = $("#play-range")[0];
    var output = $("#play-output")[0];

    if (increment) {
      input.value = parseInt(input.value) + increment;
    }
    output.innerHTML = this.state.dataSequence[input.value].name;
    this.setState({
      value: input.value
    });
    if (input.value >= input.max) {
      // Auto-pause
      this.pause();
      this.setState(
        {
          value: 0
        },
        () => {
          output.innerHTML = this.state.dataSequence[0].name;
        }
      );
    }
  }

весь график строится сразу, мне нужно что-то, что должно пройти сначала, оно строит все точки данных для недели 1, затем недели 2 после этой недели 3, когда я нажимаю кнопку воспроизведения

Answer 1

Вам нужно начать с пустых данных и использовать метод addPoint в функции update:

function update(increment) {
    var input = $('#play-range')[0],
        output = $('#play-output')[0],
        increment;

            chart.series[0].addPoint(dataSequence[input.value].data[actualPointIndex]);
    actualPointIndex += increment;

    if (actualPointIndex === 6) {
            actualPointIndex = 0;
        input.value = parseInt(input.value) + increment;
    }

    output.innerHTML = dataSequence[input.value].name; // Output value
    if (input.value >= input.max) { // Auto-pause
        pause($('#play-pause-button')[0]);
    }
}

---

Демонстрационная версия: https://jsfiddle.net/BlackLabel/stpxyfca/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint