以下是使用的JS文件。
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/boost-canvas.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
下面是生成Trea Map图的代码，
var chartId = _containerId;// "containergraph_" + loop;
Highcharts.chart(chartId,
{
chart: {
useHTML: true,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1, marginBottom: 20,
marginTop: 100,
events: {
load: function () {
this.credits.element.onclick = function () {
window.open(
'/about',
'_blank'
);
}
}
}
},
title: {
text: Title,
y: 50,
verticalAlign: 'top',
},
lang: {
some_key: 'Click to view All Sectors',
some_key2: 'All Sector',
some_key3: 'Back',
},
exporting: {
buttons: {
exportButton: {
align: 'left',
x: 40
},
contextButton: {
enabled: false
},
customButton: {
text: 'Click to view All Sectors',
_titleKey: 'some_key',
onclick: function () {
if (lss_fgss_lms_fgms_CommodityCode.length !== lss_fgss_lms_fgms_AggregationLevel) {
if (_classification_1 == 'HS') {
lss_fgss_lms_fgms_AggregationLevel = lss_fgss_lms_fgms_CommodityCode.length + 2;
}
if (_classification_1 == 'ST') {
lss_fgss_lms_fgms_AggregationLevel = lss_fgss_lms_fgms_CommodityCode.length + 1;
}
};
whattoclick('btn_showAll_containergraph', TabIndex.toString(), lss_fgss_lms_fgms_CommodityCode, $("#PartnersCountries").select2('data')[TabIndex].id);
},
align: 'left',
x: 0,
theme: {
fill: '#8AC700',
'stroke-width': 1,
stroke: '#f2f2f2',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
},
style: {
color: '#FFFFFF',
fontFamily: 'Montserrat',
fontSize: '14px',
}
},
backButton: {
align: 'left',
x: 180,
theme: {
fill: '#8AC700',
'stroke-width': 1,
stroke: '#f2f2f2',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
},
enabled: lssbackstatus,
text: 'Return to Parent(Top Sectors)',
_titleKey: 'some_key3',
onclick: function () {
ShowParentGraph_New(TabIndex.toString(), lss_fgss_lms_fgms_CommodityCode, $("#PartnersCountries").select2('data')[TabIndex].id);
}
},
printButton: {
text: 'Print',
_titleKey: 'printChart',
onclick: function () {
this.print();
}
}
}
},
credits:
{
enabled: true,
text: 'Copyright © 2017 East-West.World, All Right Reserved'
},
legend: {
enabled: false
},
/* colorAxis: {
dataClasses: [
{ to: 0.99, color: 'pink', name: '<1' },
{ from: 1.00, to: 5.99, color: '#92D050', name: '1.00 - 5.99' },
{ from: 6.00, to: 10.99, color: '#A9D18D', name: '6.00 to 10.99' },
{ from: 11.00, to: 15.99, color: '#C5E0B2', name: '11.00 to 15.99' },
{ from: 16.00, to: 20.99, color: '#FFFF00', name: '16.00 to 20.99' },
{ from: 21.00, to: 25.99, color: '#FFDA65', name: '21.00 to 25.99' },
{ from: 26.00, to: 30.99, color: '#FF6600', name: '26.00 to 30.99' },
{ from: 31.00, to: 35.99, color: '#FF3300', name: '31.00 to 35.99' },
{ from: 40.00, color: '#FF0000', name: '>40.00' },
]
},*/
colorAxis: {
minColor: Highcharts.getOptions().colors[2],
maxColor: '#FFFFFF',
},
tooltip: {
// backgroundColor: '#f5f5f5',
width: '100px',
shared: true,
useHTML: true,
formatter: function () {
if (typeof this.point.NewField === 'undefined') {
alert("undefined variable");
_newfield = "";
}
else {
_newfield = this.point.NewField.substring(0, 90) + "...";
}
return '<table id="TooltipGraphs" width="400px" class="table-4 display row-border order-column preview-table text-center" border="1">' +
'<tr class="TooltipHeading"><td colspan="3">' + _newfield + '</td><td>Change</td></tr>' +
'<tr><td>Heading</td><td>' + ToYear + '</td><td>' + FromYear + '</td><td>' + ToYear + '-' + FromYear + '</td></tr>' +
'<tr class=""><td colspan="1">' + "Trade Value" + '</td><td>$' + UpdateComma(this.point.tradevalueTo) + '</td><td>' + UpdateComma(this.point.tradevalueFrom) + '</td><td>' + UpdateComma(this.point.tradevalueTo - this.point.tradevalueFrom) + '</td></tr>' +
'<tr class="MarketShareTr"><td colspan="1">' + "Market Share" + '</td><td><b>' + RoundTo2DeciamlPalce(this.point.MarketShareEnd) + '%</b></td><td>' + RoundTo2DeciamlPalce(this.point.MarketShareStart) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.MarketShareEnd - this.point.MarketShareStart) + '%</td></tr>' +
'<tr class="ContributionTr"><td colspan="1">' + "Contribution" + '</td><td>' + RoundTo2DeciamlPalce(this.point.ContributionEnd) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.ContributionStart) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.ContributionEnd - this.point.ContributionStart) + '%</td></tr>' +
'<tr class="SectorShareTr"><td colspan="1">' + "Sector Share" + '</td><td>' + RoundTo2DeciamlPalce(this.point.SectorEnd) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.SectorStart) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.SectorEnd - this.point.SectorStart) + '%</td></tr>' +
'<tr class="MarketSpecializationTr"><td colspan="1">' + "Market Specialization" + '</td><td>' + RoundTo2DeciamlPalce(this.point.MarketSpecializationEnd) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.MarketSpecializationStart) + '%</td><td>' + RoundTo2DeciamlPalce(this.point.MarketSpecializationEnd - this.point.MarketSpecializationStart) + '%</td></tr>' +
'</table>';
}
,
positioner: function () {
return { x: 0, y: 80 };
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: _newJsonData,
name: "Heat Map",
showInLegend: false,
}],
plotOptions: {
treemap: {
minPointLength: 3,
PixelPointWidth: 30
},
series: {
showInLegend: true,
cursor: 'pointer',
point: {
events: {
click: function () {
if (_classification_1 == "HS" && this.options.name.split("<br/>")[0].length == 6) {
// jAlert('Maximum Aggregation level Reached.', "HS Sectors");
return false;
}
if (_classification_1 != "HS" && this.options.name.split("<br/>")[0].length == 5) {
//jAlert('Maximum Aggregation level Reached.', "SITC Sectors");
return false;
}
lssbackstatus = true;
lss_fgss_lms_fgms_CommodityCode = this.options.name.split("<br/>")[0];
LMS_Child_Graph(this.options.name.split("<br/>")[0], (TabIndex))
return false;
},
legendItemClick: function () {
var visibility = this.visible ? 'visible' : 'hidden';
if (!confirm('The series is currently ' +
visibility + '. Do you want to change that?')) {
return false;
}
}
}
}
}
}
});
图[coloraxis]表现不同，在Graph上有蓝色树形图，当你展开任何树元素时，下一个图形也是蓝色，当我点击Back to Parent时，图形颜色表现为预期，但当我再次遍历图表时，它的颜色从绿色阴影变为蓝色。
你可以通过这个创建的gif了解我的意思。 Here。
按照实际页面的链接。 Actual Page
ColorAxis定义
colorAxis: {
minColor: Highcharts.getOptions().colors[2],
maxColor: '#FFFFFF',
},
以下是jsfiddle
答案 0 :(得分：0)
我在所需的输入JSON中缺少colorValue，
正确的结构
[{
"MarketShareStart": 2.03,
"MarketShareEnd": 1.71,
"NewField": "040900-Honey; natural",
"value": 1.71,
"startvalue": 2.03,
"tradevalueFrom": 20718254,
"tradevalueTo": 17075985,
"colorValue": 0, // This is the key I was missing
"name": "040900<br>(1.71)",
"ContributionStart": 0.01,
"ContributionEnd": 0.02,
"SectorStart": 0.02,
"SectorEnd": 0.02,
"MarketSpecializationStart": 0.32,
"MarketSpecializationEnd": 0.28
}]