javascript - 使用 AngularJS 更新 Fusion 图表

标签 javascript angularjs fusioncharts

我有一个相当简单的问题。我有一个位于选项卡中的 fusionchart 树形图。融合图的数据无限变化。因此，理想情况下，树形图也应该更新。

好吧，如果打开该选项卡，它确实会更新。但如果我在不同的选项卡上，树状图不会更新。代码片段如下-

Controller -

var grabData = function(){$http.get('someApi').then(function success(response) {
//logic to update $scope.final_data
$scope.dataSource = {
'chart': {
    //configuration
},
   'data': $scope.final_data,
   'colorrange': {
       //fusion chart options
    };
       // $scope.change = false;
}, function error(response) {});};

HTML-

<div fusioncharts
    width= "100%"
    height= "450"
    type= "treemap"
    dataFormat= "json"
    dataSource= "{{dataSource}}">
</div>

谢谢!

最佳答案

理解问题

Data not getting update while another tab is in focus, i.e. the chart-container element is not in a visible state.

为了更好的解释，让我们考虑一个包含五个选项卡的虚拟代码。每个选项卡都有一个正在渲染的树形图。每 1 分钟间隔后，标题就会更新一次，显示当前时间和日期。

$(function() {
  var chartArr = [],
    tabArr = $('.tab-content')[0].children,
    obj = {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/><b>SAR (body) : </b>$svalue W/kg<br/><b>Units Sold : </b>$value</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "ffffff",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "labelFontColor": "ffffff",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "algorithm": "squarified",
        "theme": "zune"
      },
      "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
          "label": "Samsung",
          "fillcolor": "838986",
          "value": "2217",
          "data": [{
            "label": "Galaxy Note 4",
            "value": "519",
            "sValue": "1.09"
          }, {
            "label": "Galaxy S6 Edge",
            "value": "448",
            "sValue": "1.48"
          }, {
            "label": "Galaxy S6",
            "value": "416",
            "sValue": "1.13"
          }, {
            "label": "Galaxy J1",
            "value": "304",
            "sValue": "1.18"
          }, {
            "label": "Galaxy J7",
            "value": "159",
            "sValue": "1.36"
          }, {
            "label": "Galaxy Note5",
            "value": "191",
            "sValue": "1.48"
          }, {
            "label": "galaxy A8",
            "value": "180",
            "sValue": "1.19"
          }]
        }, {
          "label": "Apple",
          "fillcolor": "838986",
          "value": "1283",
          "data": [{
            "label": "iPhone 6",
            "value": "340",
            "sValue": "1.08"
          }, {
            "label": "iPhone 6s plus",
            "value": "296",
            "sValue": "1.14"
          }, {
            "label": "iPhone 6s",
            "value": "227",
            "sValue": "1.12"
          }, {
            "label": "iPhone 5s",
            "value": "174",
            "sValue": "1.18"
          }, {
            "label": "iPhone 5c",
            "value": "96",
            "sValue": "1.18"
          }, {
            "label": "iPhone 4s",
            "value": "150",
            "sValue": "1.11"
          }]
        }, {
          "label": "Nokia",
          "fillcolor": "838986",
          "value": "759",
          "data": [{
            "label": "Lumia 630",
            "value": "101",
            "sValue": "1.13"
          }, {
            "label": "lumia 810",
            "value": "98",
            "sValue": "0.85"
          }, {
            "label": "lumia 930",
            "value": "105",
            "sValue": "0.56"
          }, {
            "label": "lumia 950 XL dual sim",
            "value": "85",
            "sValue": "0.75"
          }, {
            "label": "lumia 735",
            "value": "64",
            "sValue": "0.78"
          }, {
            "label": "lumia 830",
            "value": "66",
            "sValue": "0.83"
          }, {
            "label": "lumia 1320 LTE",
            "value": "133",
            "sValue": "0.29"
          }, {
            "label": "lumia 1320",
            "value": "107",
            "sValue": "0.29"
          }]
        }, {
          "label": "LG",
          "fillcolor": "838986",
          "value": "441",
          "data": [{
            "label": "G4",
            "value": "189",
            "sValue": "0.51"
          }, {
            "label": "L70 Dual",
            "value": "122",
            "sValue": "0.52"
          }, {
            "label": "G FLEX 2",
            "value": "77",
            "sValue": "0.64"
          }, {
            "label": "G3 S",
            "value": "53",
            "sValue": "0.64"
          }]
        }, {
          "label": "Huawei",
          "fillcolor": "838986",
          "value": "411",
          "data": [{
            "label": "Y3 U03",
            "value": "136",
            "sValue": "1.40"
          }, {
            "label": "G8",
            "value": "78",
            "sValue": "0.87"
          }, {
            "label": "Y520",
            "value": "67",
            "sValue": "1.35"
          }, {
            "label": "ascend p7",
            "value": "48",
            "sValue": "0.97"
          }, {
            "label": "G7 plus",
            "value": "27",
            "sValue": "0.87"
          }, {
            "label": "P8",
            "value": "55",
            "sValue": "1.23"
          }]
        }, {
          "label": "Lenovo",
          "fillcolor": "838986",
          "value": "489",
          "data": [{
            "label": "A5000",
            "value": "47",
            "sValue": "0.69"
          }, {
            "label": "vibe P780",
            "value": "37",
            "sValue": "0.69"
          }, {
            "label": "K4 Note",
            "value": "156",
            "sValue": "0.69"
          }, {
            "label": "A7010",
            "value": "89",
            "sValue": "0.71"
          }, {
            "label": "Vibe P1 Mini",
            "value": "110",
            "sValue": "0.67"
          }, {
            "label": "Vibe x3 Lite",
            "value": "50",
            "sValue": "0.77"
          }]
        }, {
          "label": "Sony",
          "fillcolor": "838986",
          "value": "200",
          "data": [{
            "label": "Xperia Z3",
            "value": "38",
            "sValue": "1.5"
          }, {
            "label": "Xperia Z3+",
            "value": "25",
            "sValue": "1.38"
          }, {
            "label": "Xperia Z5",
            "value": "67",
            "sValue": "0.64"
          }, {
            "label": "Xperia X3 Dual",
            "value": "46",
            "sValue": "0.73"
          }, {
            "label": "Xperia E4",
            "value": "24",
            "sValue": "0.77"
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "0",
        "gradient": "1",
        "minvalue": "0",
        "code": "dfff72",
        "startlabel": "Ideal",
        "endlabel": "Threshold",
        "color": [{
          "code": "062a3f",
          "maxvalue": "1.6",
          "label": "Threshold"
        }]
      }
    };

  function chartGenerator(selector) {
    //console.log(selector);
    var visitChart = new FusionCharts({
        type: 'treemap',
        renderAt: selector,
        width: '550',
        height: '550',
        dataFormat: 'json',
        dataSource: obj
      })
      .render();
    setInterval(function() {
      var data = visitChart.getJSONData(),
        dt = new Date();
      data.chart.caption = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
      visitChart.setJSONData(data);
    }, 1000);
    return visitChart;
  }

  FusionCharts.ready(function() {
    for (var len = tabArr.length, i = 0; i < len; i += 1) {
      chartGenerator(tabArr[i].id);
    }
  });
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#Tab_1" data-toggle="tab">Tab 1</a>
  </li>
  <li class=""><a href="#Tab_2" data-toggle="tab">Tab 2</a>
  </li>
  <li class=""><a href="#Tab_3" data-toggle="tab">Tab 3</a>
  </li>
  <li class=""><a href="#Tab_4" data-toggle="tab">Tab 4</a>
  </li>
  <li class=""><a href="#Tab_5" data-toggle="tab">Tab 5</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active in" id="Tab_1">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_2">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_3">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_4">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_5">
    FusionCharts rendering here...
  </div>
</div>

人们很容易注意到，字幕中的时间不同步。不可见选项卡容器中的标题不会更新。

原因

FusionCharts uses different DOM level operations to offer a prettier visualisation

通过这些操作，它可以进行详尽的空间管理，这在容器保持隐藏模式的情况下变得不太可能。因此在这些状态下数据更新将被忽略。

解决方法

Lets walk through an effective work-around to handle these situations.

  • If the container is not in a visible state, store the data(that needs to be updated with) in a store.
  • Listen to the event while changing a tab.
  • Update the chart with the latest data.

下面是实现这一点的一种方法。

$(function() {
  var chartArr = [],
    tabArr = $('.tab-content')[0].children,
    obj = {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/><b>SAR (body) : </b>$svalue W/kg<br/><b>Units Sold : </b>$value</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "ffffff",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "labelFontColor": "ffffff",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "algorithm": "squarified",
        "theme": "zune"
      },
      "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
          "label": "Samsung",
          "fillcolor": "838986",
          "value": "2217",
          "data": [{
            "label": "Galaxy Note 4",
            "value": "519",
            "sValue": "1.09"
          }, {
            "label": "Galaxy S6 Edge",
            "value": "448",
            "sValue": "1.48"
          }, {
            "label": "Galaxy S6",
            "value": "416",
            "sValue": "1.13"
          }, {
            "label": "Galaxy J1",
            "value": "304",
            "sValue": "1.18"
          }, {
            "label": "Galaxy J7",
            "value": "159",
            "sValue": "1.36"
          }, {
            "label": "Galaxy Note5",
            "value": "191",
            "sValue": "1.48"
          }, {
            "label": "galaxy A8",
            "value": "180",
            "sValue": "1.19"
          }]
        }, {
          "label": "Apple",
          "fillcolor": "838986",
          "value": "1283",
          "data": [{
            "label": "iPhone 6",
            "value": "340",
            "sValue": "1.08"
          }, {
            "label": "iPhone 6s plus",
            "value": "296",
            "sValue": "1.14"
          }, {
            "label": "iPhone 6s",
            "value": "227",
            "sValue": "1.12"
          }, {
            "label": "iPhone 5s",
            "value": "174",
            "sValue": "1.18"
          }, {
            "label": "iPhone 5c",
            "value": "96",
            "sValue": "1.18"
          }, {
            "label": "iPhone 4s",
            "value": "150",
            "sValue": "1.11"
          }]
        }, {
          "label": "Nokia",
          "fillcolor": "838986",
          "value": "759",
          "data": [{
            "label": "Lumia 630",
            "value": "101",
            "sValue": "1.13"
          }, {
            "label": "lumia 810",
            "value": "98",
            "sValue": "0.85"
          }, {
            "label": "lumia 930",
            "value": "105",
            "sValue": "0.56"
          }, {
            "label": "lumia 950 XL dual sim",
            "value": "85",
            "sValue": "0.75"
          }, {
            "label": "lumia 735",
            "value": "64",
            "sValue": "0.78"
          }, {
            "label": "lumia 830",
            "value": "66",
            "sValue": "0.83"
          }, {
            "label": "lumia 1320 LTE",
            "value": "133",
            "sValue": "0.29"
          }, {
            "label": "lumia 1320",
            "value": "107",
            "sValue": "0.29"
          }]
        }, {
          "label": "LG",
          "fillcolor": "838986",
          "value": "441",
          "data": [{
            "label": "G4",
            "value": "189",
            "sValue": "0.51"
          }, {
            "label": "L70 Dual",
            "value": "122",
            "sValue": "0.52"
          }, {
            "label": "G FLEX 2",
            "value": "77",
            "sValue": "0.64"
          }, {
            "label": "G3 S",
            "value": "53",
            "sValue": "0.64"
          }]
        }, {
          "label": "Huawei",
          "fillcolor": "838986",
          "value": "411",
          "data": [{
            "label": "Y3 U03",
            "value": "136",
            "sValue": "1.40"
          }, {
            "label": "G8",
            "value": "78",
            "sValue": "0.87"
          }, {
            "label": "Y520",
            "value": "67",
            "sValue": "1.35"
          }, {
            "label": "ascend p7",
            "value": "48",
            "sValue": "0.97"
          }, {
            "label": "G7 plus",
            "value": "27",
            "sValue": "0.87"
          }, {
            "label": "P8",
            "value": "55",
            "sValue": "1.23"
          }]
        }, {
          "label": "Lenovo",
          "fillcolor": "838986",
          "value": "489",
          "data": [{
            "label": "A5000",
            "value": "47",
            "sValue": "0.69"
          }, {
            "label": "vibe P780",
            "value": "37",
            "sValue": "0.69"
          }, {
            "label": "K4 Note",
            "value": "156",
            "sValue": "0.69"
          }, {
            "label": "A7010",
            "value": "89",
            "sValue": "0.71"
          }, {
            "label": "Vibe P1 Mini",
            "value": "110",
            "sValue": "0.67"
          }, {
            "label": "Vibe x3 Lite",
            "value": "50",
            "sValue": "0.77"
          }]
        }, {
          "label": "Sony",
          "fillcolor": "838986",
          "value": "200",
          "data": [{
            "label": "Xperia Z3",
            "value": "38",
            "sValue": "1.5"
          }, {
            "label": "Xperia Z3+",
            "value": "25",
            "sValue": "1.38"
          }, {
            "label": "Xperia Z5",
            "value": "67",
            "sValue": "0.64"
          }, {
            "label": "Xperia X3 Dual",
            "value": "46",
            "sValue": "0.73"
          }, {
            "label": "Xperia E4",
            "value": "24",
            "sValue": "0.77"
          }]
        }]
      }],
      "colorrange": {
        "mapbypercent": "0",
        "gradient": "1",
        "minvalue": "0",
        "code": "dfff72",
        "startlabel": "Ideal",
        "endlabel": "Threshold",
        "color": [{
          "code": "062a3f",
          "maxvalue": "1.6",
          "label": "Threshold"
        }]
      }
    };

  function chartGenerator(selector) {
    //console.log(selector);
    var elemId = '#' + selector,
      elem = $(elemId),
      visitChart = new FusionCharts({
        type: 'treemap',
        renderAt: selector,
        width: '550',
        height: '550',
        dataFormat: 'json',
        dataSource: obj
      })
      .render();
    setInterval(function() {
      var data = visitChart.getJSONData(),
        dt = new Date();
      data.chart.caption = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
      if (!elem[0].offsetHeight || !elem[0].offsetWidth) {
        dataStore.set(elemId, visitChart, data);
      } else {
        visitChart.setJSONData(data);
      }
    }, 1000);
  }

  FusionCharts.ready(function() {
    for (var len = tabArr.length, i = 0; i < len; i += 1) {
      chartGenerator(tabArr[i].id);
    }
  });
});

var dataStore = (function() {
  var store = {};
  return {
    get: function(selector) {
      return store[selector];
    },
    set: function(selector, chartRef, data) {
      var obj;
      if (!(obj = store[selector])) {
        obj = store[selector] = {};
      }
      obj.chartRef = chartRef;
      obj.data = data;
    }
  }
})();


$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var data,
    elem = $(e.target),
    target = elem.attr("href"),
    res = dataStore.get(target),
    chartRef = res.chartRef,
    data = res.data;
  chartRef.setJSONData(data);
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#Tab_1" data-toggle="tab">Tab 1</a>
  </li>
  <li class=""><a href="#Tab_2" data-toggle="tab">Tab 2</a>
  </li>
  <li class=""><a href="#Tab_3" data-toggle="tab">Tab 3</a>
  </li>
  <li class=""><a href="#Tab_4" data-toggle="tab">Tab 4</a>
  </li>
  <li class=""><a href="#Tab_5" data-toggle="tab">Tab 5</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active in" id="Tab_1">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_2">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_3">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_4">
    FusionCharts rendering here...
  </div>
  <div class="tab-pane" id="Tab_5">
    FusionCharts rendering here...
  </div>
</div>

只要不断更改选项卡，瞧!完成了!

关于javascript - 使用 AngularJS 更新 Fusion 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38487850/

上一篇：javascript - 不同步文本框的输入

下一篇：javascript - 在 D3 中换行长文本标签，无需额外换行

相关文章：

javascript - Internet Explorer 错误 : SCRIPT5009: ArrayBuffer is undefined

javascript - 按第 n 行更改字体大小

javascript - 如何在 FusionChart js multilevelpie 中使切片成为链接？

java - 融合图x轴可以用点而不是标签来表示吗

javascript - 融合图表上的 HTML 标题和子标题

javascript - 如何获取动态创建的按钮的值？

javascript - 无法使用 js 动态显示 html5 视频

javascript - Async/Await 函数不等待 console.log 它的响应

javascript - 单击 ion-option-button 后 ion-item 中的 "swipe back"

css - Angular JS 中搜索文本中的 Material 图标

©2024 IT工具网  联系我们