我正在嘗試將 amcharts 的控件與 React 音頻播放器結合起來。在這里,我有帶滑塊的 amcharts 折線圖?,F在我正在嘗試以這樣一種方式控制滑塊,即每當我按下 React 音頻播放器的播放按鈕時,我都可以使用音頻播放器的搜索器移動滑塊。我希望,這對你有意義。import React from "react";import ReactAudioPlayer from "react-audio-player";import audio from "/home/aniruddha/workspace/playwith_audio/anni_web_player/src/audio.flac";import * as am4core from "@amcharts/amcharts4/core";import * as am4charts from "@amcharts/amcharts4/charts";import am4themes_spiritedaway from "@amcharts/amcharts4/themes/spiritedaway";import am4themes_animated from "@amcharts/amcharts4/themes/animated";/* Chart code */// Themes beginam4core.useTheme(am4themes_spiritedaway);am4core.useTheme(am4themes_animated);class App extends React.Component { constructor(props) { super(props); this.state = {slider: 1586169460800}; } componentDidMount() { let chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.data = this.generateChartData(); // Create axes let dateAxis = chart.xAxes.push(new am4charts.DateAxis()); let valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series let series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = "visits"; series.dataFields.dateX = "date"; series.strokeWidth = 1; series.minBulletDistance = 10; series.tooltipText = "{valueY}"; series.fillOpacity = 0.1; series.tooltip.pointerOrientation = "vertical"; series.tooltip.background.cornerRadius = 20; series.tooltip.background.fillOpacity = 0.5; series.tooltip.label.padding(12, 12, 12, 12); let seriesRange = dateAxis.createSeriesRange(series); seriesRange.contents.strokeDasharray = "2,3"; seriesRange.contents.stroke = chart.colors.getIndex(8); seriesRange.contents.strokeWidth = 1; });我無法訪問this.setState({slider: 1586025000000 })該sound功能。我很新的反應。歡迎提出任何建議;
將數據從 ReactAudioPlayer 傳遞到 Amcharts 滑塊?
揚帆大魚
2023-06-09 17:21:44