我想在热图数据图的工具提示中添加 X 轴和 Y 轴的描述值。我使用 trLabel 和 tlLabel 属性实现了这一点，但因为它用于显示方框内左上角和右上角的值。我不希望该值位于数据绘图框中。我只希望这些出现在工具提示中。
如果我做错了，请建议我正确的方法。
Fiddle显示我的方法。
如有任何帮助，我们将不胜感激。
最佳答案
我尝试解决您的问题，希望这对您有帮助..
FusionCharts.ready(function() {
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '270',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
}
,
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}
],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [
{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
},
{
"code": "#f6bc33",
"minValue": "5",
"maxValue": "7",
"label": "Average"
},
{
"code": "#6da81e",
"minValue": "7",
"maxValue": "10",
"label": "Good"
}
]
}
}
});
salesHMChart.render();
});
关于javascript - 如何从正方形中删除 trlabel 值和 tlLabel 值，但它应该出现在热图图表的工具提示中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31399933/