javascript - 与页面中的多个图表交互

Question

如果我有多个图表，例如我的页面上有一个堆积条形图和一个饼图。我想在其中一个图表上进行交互(例如单击)，并在另一个图表上看到一些视觉更新。我尝试按以下方式使用 FusionCharts 创建它们:

FusionCharts.ready(function() {
  var pieChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'pieContainer',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Company Revenue",
        "enableMultiSlicing": "0",
        "bgcolor": "FFFFFF",
        "showvalues": "1",
        "showpercentvalues": "1",
        "showborder": "0",
        "showplotborder": "0",
        "showlegend": "1",
        "legendborder": "0",
        "legendposition": "bottom",
        "enablesmartlabels": "1",
        "use3dlighting": "0",
        "showshadow": "0",
        "legendbgcolor": "#CCCCCC",
        "legendbgalpha": "20",
        "legendborderalpha": "0",
        "legendshadow": "0",
        "legendnumcolumns": "3",
        "palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78"
      },
      "data": [{
        "label": "Services",
        "value": "26"
      }, {
        "label": "Hardware",
        "value": "32"
      }, {
        "label": "Software",
        "value": "42"
      }]
    }
  }).render();

  var stackedBar = new FusionCharts({
    type: 'stackedBar2D',
    renderAt: 'barContainer',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Company Revenue",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "bgcolor": "FFFFFF",
        "outcnvbasefontcolor": "666666",
        "numberprefix": "$",
        "showvalues": "0",
        "numvdivlines": "10",
        "showalternatevgridcolor": "1",
        "alternatevgridcolor": "e1f5ff",
        "divlinecolor": "e1f5ff",
        "vdivlinecolor": "e1f5ff",
        "basefontcolor": "666666",
        "tooltipbgcolor": "F3F3F3",
        "tooltipbordercolor": "666666",
        "canvasbordercolor": "666666",
        "canvasborderthickness": "1",
        "showplotborder": "1",
        "plotfillalpha": "80",
        "showborder": "0",
        "legendbgcolor": "#CCCCCC",
        "legendbgalpha": "20",
        "legendborderalpha": "0",
        "legendshadow": "0",
        "legendnumcolumns": "3"
      },
      "categories": [{
        "category": [{
          "label": "Jan"
        }, {
          "label": "Feb"
        }, {
          "label": "Mar"
        }, {
          "label": "Apr"
        }, {
          "label": "May"
        }, {
          "label": "Jun"
        }, {
          "label": "Jul"
        }, {
          "label": "Aug"
        }, {
          "label": "Sep"
        }, {
          "label": "Oct"
        }, {
          "label": "Nov"
        }, {
          "label": "Dec"
        }]
      }],
      "dataset": [{
        "seriesname": "Product A",
        "data": [{
          "value": "27400"
        }, {
          "value": "29800"
        }, {
          "value": "25800"
        }, {
          "value": "26800"
        }, {
          "value": "29600"
        }, {
          "value": "32600"
        }, {
          "value": "31800"
        }, {
          "value": "36700"
        }, {
          "value": "29700"
        }, {
          "value": "31900"
        }, {
          "value": "34800"
        }, {
          "value": "24800"
        }]
      }, {
        "seriesname": "Product B",
        "data": [{
          "value": "10000"
        }, {
          "value": "11500"
        }, {
          "value": "12500"
        }, {
          "value": "15000"
        }, {
          "value": "11000"
        }, {
          "value": "9800"
        }, {
          "value": "11800"
        }, {
          "value": "19700"
        }, {
          "value": "21700"
        }, {
          "value": "21900"
        }, {
          "value": "22900"
        }, {
          "value": "20800"
        }]
      }],
      "trendlines": [{
        "line": [{
          "startvalue": "42000",
          "color": "91C728",
          "displayvalue": "Target",
          "showontop": "1"
        }]
      }],
      "styles": {
        "definition": [{
          "name": "CanvasAnim",
          "type": "animation",
          "param": "_xScale",
          "start": "0",
          "duration": "1"
        }],
        "application": [{
          "toobject": "Canvas",
          "styles": "CanvasAnim"
        }]
      }
    }
  }).render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div>
  <span id="barContainer">FusionCharts XT will load here!</span>
  <span id="pieContainer">FusionCharts XT will load here!</span>
</div>

现在如何在与其中一个图表交互时更新另一个图表？比如说，通过单击或悬停在一个图表上的图，可以在另一个图表中看到其视觉更新。

**注意:** 数据在本例中不相关。只需要建立图表之间的交互性。对使用的 JS 库没有限制，可以完全基于响应者的选择。任何帮助都非常值得赞赏。

Answer 1

使用 highcharts，您可以覆盖点击功能，然后更新您想要的任何属性。

参见:http://api.highcharts.com/highcharts#chart.events