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

Answer 2

我不知道FusionCharts是怎么回事，虽然我认为应该可以在不同类型的图表之间同步数据，但我使用了很多amCharts，如果你对库没有限制，那么我把这个快速提示链接到向您展示您可以在那里快速实施的内容。

http://www.amcharts.com/tips/automatically-syncing-pie-chart-data-column-chart-hover/

与页面中的多个图表交互

2 个答案: