highcharts 与页面中的多个图表交互

voj3qocg  于 2023-10-20  发布在  Highcharts
关注(0)|答案(3)|浏览(157)

如果我有多个图表,比如说在我的页面上有一个堆叠的条形图和一个饼图。我喜欢互动(例如:点击)在其中之一,并看到一些视觉更新的其他图表。我尝试用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库没有限制,可以完全基于响应者的选择。任何帮助都是非常值得的。

wydwbb8l

wydwbb8l1#

使用highcharts,您可以覆盖click函数,然后更新您想要的任何属性。
参见:http://api.highcharts.com/highcharts#chart.events

dfuffjeb

dfuffjeb2#

我不知道它是如何与FusionCharts,虽然我认为不同类型的图表之间的同步数据应该是可能的,但我使用了很多amCharts,如果你对库没有限制,那么我把这个快速提示链接向你展示你可以相当快地实现那里.
http://www.amcharts.com/tips/automatically-syncing-pie-chart-data-column-chart-hover/

q1qsirdb

q1qsirdb3#

您可以使用向下钻取到详细的链接图表,这些图表以不同的详细程度显示数据。
使用链接图表,您可以使用单个数据源创建无限制级别的钻取图表。
您可以通过单击父图表的数据图项深入查看子图表。子图表可以替换父图表(带有向上钻取选项),也可以在新窗口或框架中打开。
要了解有关此功能的更多信息,请参阅-https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down#chart-links-linked-charts-

FusionCharts.ready(function() {
  var satisfactionChart = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Top 3 Juice Flavors",
        "subcaption": "Last year",
        "xaxisName": "Flavor",
        "yaxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fusion"
      },
      "data": [{
        "label": "Apple",
        "value": "810000",
        "link": "newchart-xml-apple"
      }, {
        "label": "Cranberry",
        "value": "620000",
        "link": "newchart-xml-cranberry"
      }, {
        "label": "Grapes",
        "value": "350000",
        "link": "newchart-xml-grapes"
      }],
      "linkeddata": [{
        "id": "apple",
        "linkedchart": {
          "chart": {
            "caption": "Apple Juice - Quarterly Sales",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fusion",
            "rotateValues": "0"
          },
          "data": [{
            "label": "Q1",
            "value": "157000"
          }, {
            "label": "Q2",
            "value": "172000"
          }, {
            "label": "Q3",
            "value": "206000"
          }, {
            "label": "Q4",
            "value": "275000",
            "rotateValues": "0"
          }]
        }
      }, {
        "id": "cranberry",
        "linkedchart": {
          "chart": {
            "caption": "Cranberry Juice - Quarterly Sales",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fusion",
            "rotateValues": "0"
          },
          "data": [{
            "label": "Q1",
            "value": "102000"
          }, {
            "label": "Q2",
            "value": "142000"
          }, {
            "label": "Q3",
            "value": "187000"
          }, {
            "label": "Q4",
            "value": "189000"
          }]
        }
      }, {
        "id": "grapes",
        "linkedchart": {
          "chart": {
            "caption": "Grape Juice - Quarterly Sales",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberprefix": "$",
            "theme": "fusion",
            "rotateValues": "0"
          },
          "data": [{
            "label": "Q1",
            "value": "45000"
          }, {
            "label": "Q2",
            "value": "72000"
          }, {
            "label": "Q3",
            "value": "95000"
          }, {
            "label": "Q4",
            "value": "108000"
          }]
        }
      }]
    }
  });
    
  satisfactionChart.render();
  satisfactionChart.configureLink({
    type: 'pie2d',
    width: '80%', 
   });

});

这里是演示-https://jsfiddle.net/8j5qoayg/

相关问题