Javascript 当我在fusionchart的另一个部分点击任何美国州地图时，图表过滤器

我使用的是美国/州地图fusionchart，因此，当我单击任何美国州时，它将触发另一部分中的新条形图，反之亦然。每次单击任何图表（世界地图或条形图）时，数据过滤器我知道我们可以使用事件侦听器，但这里我关心的是当我单击任何其他图表时，另一部分中的数据如何过滤图表数据也会过滤或触发。下面我附上了屏幕截图，当我点击任何状态时，左侧图像即美国地图，其他条形图数据将在右侧触发

const数据集=[
{
id:“你好”，
价值：“3189000”，
//链接：“j-drillDownState-HI |夏威夷”，
链接：“Detailed/TotalSales.html”，
阿尔法：“100”，
usehovercolor:“1”，
显示工具提示：“1”，
},
{
id:“DC”，
价值：“2879000”，
链接：“Detailed/TotalSales.html”，
},
{
id:“MD”，
价值：“33592000”，
链接：“j-drillDownState-MD |马里兰州”，
},
{
id:“DE”，
值：“4607000”，
链接：“j-drillDownState-DE |特拉华”，
},
{
id:“RI”，
值：“4890000”，
链接：“j-drillDownState-RI |罗德岛”，
},
{
id:“WA”，
值：“34927000”，
链接：“j-drillDownState-WA | Washington”，
},]
常量图表配置={
类型：“地图/美国”//图表类型
id:“数据绘图单击鼠标事件”，
宽度：“500”//图表的宽度
高度：“400”//图表的高度
dataFormat:“json”，//数据类型
数据源：{
//地图配置
图表：{
numbersuffix:“%”，
IncludeValueInBels:“1”，
labelsepchar:“：”，
entityFillHoverColor:#FFF9C4“，
主题：“融合”，
颜色：“红色”，
},
活动：{
数据绘图单击：函数（e）{
var infoElem=document.getElementById（“infolbl”）；
var指数=e.data.dataIndex；
infoElem.innerHTML=
“来自的平均值”+
e、 data.startText+
“到”+
e、 data.endText+
“是”+
数学四舍五入（e.data.binValue*100）/100+
“k”；
},
},
活动：{
//在初始化之前附加到
已初始化：函数（）{
log（“初始化的mychart…”）；
},
},
数据：数据集，
},
};
类映射扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
actualValue：“将鼠标悬停在绘图上以查看值和标签”，
消息：“将鼠标悬停在绘图上以查看值和标签”，
};
this.dataplotrollover=this.dataplotrollover.bind（this）；
this.dataplotrollout=this.dataplotrollout.bind（this）；
}
dataplotrollover（eventObj、dataObj）{
这是我的国家({
信息：[
“您当前正在上方悬停”，
{dataObj.categoryLabel}，
“其价值为”，
{dataObj.displayValue}，
],
});
}
DataPlot卷展栏（eventObj、dataObj）{
这是我的国家({
消息：this.state.actualValue，
});
}
render（）{
返回(
{console.log（“map”，this.state.message）}
);
}
}
导出默认映射

在FusionCharts中，您可以在触发相应的点击事件时轻松更新图表/地图数据。对于图表，需要使用“dataplotClick”事件API，对于地图，需要使用“entityClick”事件API。在事件回调中，您需要使用“setJSONData（）”方法来更新图表/地图数据

react中的参考样品：

文档链接：-

谢谢

斯里什蒂监狱

const dataset = [
  {
    id: "HI",
    value: "3189000",
    //link: "j-drillDownState-HI|Hawaii",
    link: "Detailed/TotalSales.html",
    alpha: "100",

    usehovercolor: "1",
    showtooltip: "1",
  },
  {
    id: "DC",
    value: "2879000",
    link: "Detailed/TotalSales.html",
  },
  {
    id: "MD",
    value: "33592000",
    link: "j-drillDownState-MD|Maryland",
  },
  {
    id: "DE",
    value: "4607000",
    link: "j-drillDownState-DE|Delaware",
  },
  {
    id: "RI",
    value: "4890000",
    link: "j-drillDownState-RI|Rhode Island",
  },
  {
    id: "WA",
    value: "34927000",
    link: "j-drillDownState-WA|Washington",
  },]
const chartConfigs = {
  type: "maps/usa", // The chart type
  id: "data-plot-click-mouse-event",
  width: "500", // Width of the chart
  height: "400", // Height of the chart
  dataFormat: "json", // Data type
  dataSource: {
    // Map Configuration
    chart: {
      numbersuffix: "%",
      includevalueinlabels: "1",
      labelsepchar: ": ",
      entityFillHoverColor: "#FFF9C4",
      theme: "fusion",
      color: "red",
    },
    events: {
      dataPlotClick: function (e) {
        var infoElem = document.getElementById("infolbl");
        var index = e.data.dataIndex;
        infoElem.innerHTML =
          "The average value from <b>" +
          e.data.startText +
          "</b> to <b>" +
          e.data.endText +
          "</b> is <b>" +
          Math.round(e.data.binValue * 100) / 100 +
          "k</b>";
      },
    },

   
    events: {
      // Attach to beforeInitialize
      initialized: function () {
        console.log("Initialized mychart...");
      },
    },

    
    data: dataset,
  },
};
class Map extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      actualValue: "Hover on the plot to see the value along with the label",
      message: "Hover on the plot to see the value along with the label",
    };

    this.dataplotrollover = this.dataplotrollover.bind(this);
    this.dataplotrollout = this.dataplotrollout.bind(this);
  }

  
  dataplotrollover(eventObj, dataObj) {
    this.setState({
      message: [
        "You are currently hovering over ",
        <strong>{dataObj.categoryLabel}</strong>,
        " whose value is ",
        <strong>{dataObj.displayValue}</strong>,
      ],
    });
  }

  
  dataplotrollout(eventObj, dataObj) {
    this.setState({
      message: this.state.actualValue,
    });
  }
  render() {
    return (
      <div>
        <ReactFC
          {...chartConfigs}
          fcEvent-dataplotRollOver={this.dataplotrollover}
          fcEvent-dataplotRollOut={this.dataplotrollout}
        />

        {console.log("map", this.state.message)}
      </div>
    );
  }
}

export default Map