如何从正方形中删除trlabel值和tlLabel值,但它应该在热图表的工具提示中?

时间:2015-07-14 07:07:41

标签: javascript fusioncharts

我想在热图数据图的工具提示中添加X轴和Y轴的描述值。我使用trLabeltlLabel属性实现了这一点,但是它用于显示方框内左上角和右上角的值。我不希望数据绘图框中的值。我只想在工具提示中使用它们。

如果我做错了,请建议我正确的方法。

Fiddle展示我的方法。

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

我尝试解决你的问题,希望这会对你有帮助..

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();
        });

答案 1 :(得分:0)

尝试使用“toolText”属性。

"toolText": "8.7 {br} Quad Core 2.5 GHz {br} OS : Android 4.4 Kitkat"