$(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>
@ThatBird Lemme знает, если я что-то пропустил, или ответ нуждается в дополнительных входах. – Ayan
Есть ли угловой способ сделать это? @Ayan – ThatBird