如何在不在 fusioncharts 热图中添加列和行的情况下放置列标签

Question

我是 Fusion Charts Heat Map Table 的新手，我想在第一列标签前面的最后一行标签的正下方放置一些文本，而不添加额外的 row/column 但我失败了这样做。我浏览了官方文档，但无法得到我的问题的答案。

请查看此屏幕截图以了解我要实现的目标：

FusionCharts.ready(function() {
  var salesHMChart = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Restaurants Ratings at Seattle",
        "yAxisName": "Restaurants",
        "showPlotBorder": "1",
        "plotBorderAlpha": "100",
        "theme": "hulk-light",
        "legendItemFontSize": "15",
        "showShadow": "1"
      },
      "rows": {
        "row": [{
          "id": "A&W",
          "label": "A&W Restaurants"
        }, {
          "id": "BS",
          "label": "Bakers Square"
        }, {
          "id": "APP",
          "label": "Applebee's"
        }, {
          "id": "BB",
          "label": "Bahama Breeze"
        }]
      },
      "columns": {
        "column": [{
          "id": "ambiance",
          "label": "Ambiance"
        }, {
          "id": "cleanliness",
          "label": "Cleanliness"
        }, {
          "id": "service",
          "label": "Service"
        }, {
          "id": "Food",
          "label": "Food Quality"
        }, {
          "id": "others",
          "label": "Others"
        }]
      },
      "dataset": [{
        "data": [{
          "rowid": "A&W",
          "columnid": "ambiance",
          "value": "3.5"
        }, {
          "rowid": "A&W",
          "columnid": "cleanliness",
          "value": "1"
        }, {
          "rowid": "A&W",
          "columnid": "service",
          "value": "2"
        }, {
          "rowid": "A&W",
          "columnid": "food",
          "value": "4"
        }, {
          "rowid": "A&W",
          "columnid": "others",
          "value": "4",
        }, {
          "rowid": "BS",
          "columnid": "ambiance",
          "value": "4"
        }, {
          "rowid": "BS",
          "columnid": "cleanliness",
          "value": "1.5"
        }, {
          "rowid": "BS",
          "columnid": "service",
          "value": "3"
        }, {
          "rowid": "BS",
          "columnid": "food",
          "value": "4"
        }, {
          "rowid": "BS",
          "columnid": "others",
          "value": "4.5",
        }, {
          "rowid": "APP",
          "columnid": "ambiance",
          "value": "4"
        }, {
          "rowid": "APP",
          "columnid": "cleanliness",
          "value": "1.5"
        }, {
          "rowid": "APP",
          "columnid": "service",
          "value": "1.5"
        }, {
          "rowid": "APP",
          "columnid": "food",
          "value": "3"
        }, {
          "rowid": "APP",
          "columnid": "others",
          "value": "2",
        }, {
          "rowid": "BB",
          "columnid": "ambiance",
          "value": "2"
        }, {
          "rowid": "BB",
          "columnid": "cleanliness",
          "value": "3"
        }, {
          "rowid": "BB",
          "columnid": "service",
          "value": "3"
        }, {
          "rowid": "BB",
          "columnid": "food",
          "value": "4"
        }, {
          "rowid": "BB",
          "columnid": "others",
          "value": "2",
        }]
      }],
      "colorrange": {
        "gradient": "0",
        "minValue": "0",
        "code": "#6da81e",
        "startLabel": "Poor",
        "endLabel": "Good",
        "color": [{
          "code": "#CCF8FF",
          "minValue": "0",
          "maxValue": "2.5",
          "label": "Bad"
        }, {
          "code": "#B5CBFF",
          "minValue": "2.5",
          "maxValue": "4",
          "label": "Average"
        }, {
          "code": "#3A7CFF",
          "minValue": "4",
          "maxValue": "5",
          "label": "Good"
        }]
      }
    }
  }).render();

});

这是我的 Fiddle

提前致谢。

Answer 1

不用担心，您可以通过注释实现同样的效果。注释可以是文本/形状/图像等。您可能会发现这很有用：

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/annotations

有很多选项可以配置和微调我们想要显示的文本，但这只是工作：

{
            "id": "dyn-label",
            "type": "text",
            "fillcolor": "#000000",
            "fontsize": "11",
            "text": "Label",
            "bold": "1",
            "wrap": "1",
            "wrapWidth": "350",
            "align": "left",
            "x": "$canvasStartX",
            "y": "$canvasEndY",
          }

请运行下面的代码段。 :)

FusionCharts.ready(function () {
  var salesHMChart = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Restaurants Ratings at Seattle",
        "yAxisName": "Restaurants",
        "showPlotBorder": "1",
        "plotBorderAlpha": "100",
        "theme": "hulk-light",
        "legendItemFontSize": "15",
        "showShadow": "1"
      },
      "annotations": {
        "groups": [{
          "items": [{
            "id": "dyn-label",
            "type": "text",
            "fillcolor": "#ff0000",
            "fontsize": "11",
            "text": "Label",
            "bold": "1",
            "wrap": "1",
            "wrapWidth": "350",
            "align": "center",
            "x": "$canvasStartX - 25",
            "y": "$canvasEndY + 5",
          }]
        }]
      },
      "rows": {
        "row": [{
          "id": "A&W",
          "label": "A&W Restaurants"
        }, {
          "id": "BS",
          "label": "Bakers Square"
        }, {
          "id": "APP",
          "label": "Applebee's"
        }, {
          "id": "BB",
          "label": "Bahama Breeze"
        }]
      },
      "columns": {
        "column": [{
          "id": "ambiance",
          "label": "Ambiance"
        }, {
          "id": "cleanliness",
          "label": "Cleanliness"
        }, {
          "id": "service",
          "label": "Service"
        }, {
          "id": "Food",
          "label": "Food Quality"
        }, {
          "id": "others",
          "label": "Others"
        }]
      },
      "dataset": [{
        "data": [{
          "rowid": "A&W",
          "columnid": "ambiance",
          "value": "3.5"
        }, {
          "rowid": "A&W",
          "columnid": "cleanliness",
          "value": "1"
        }, {
          "rowid": "A&W",
          "columnid": "service",
          "value": "2"
        }, {
          "rowid": "A&W",
          "columnid": "food",
          "value": "4"
        }, {
          "rowid": "A&W",
          "columnid": "others",
          "value": "4",
        }, {
          "rowid": "BS",
          "columnid": "ambiance",
          "value": "4"
        }, {
          "rowid": "BS",
          "columnid": "cleanliness",
          "value": "1.5"
        }, {
          "rowid": "BS",
          "columnid": "service",
          "value": "3"
        }, {
          "rowid": "BS",
          "columnid": "food",
          "value": "4"
        }, {
          "rowid": "BS",
          "columnid": "others",
          "value": "4.5",
        }, {
          "rowid": "APP",
          "columnid": "ambiance",
          "value": "4"
        }, {
          "rowid": "APP",
          "columnid": "cleanliness",
          "value": "1.5"
        }, {
          "rowid": "APP",
          "columnid": "service",
          "value": "1.5"
        }, {
          "rowid": "APP",
          "columnid": "food",
          "value": "3"
        }, {
          "rowid": "APP",
          "columnid": "others",
          "value": "2",
        }, {
          "rowid": "BB",
          "columnid": "ambiance",
          "value": "2"
        }, {
          "rowid": "BB",
          "columnid": "cleanliness",
          "value": "3"
        }, {
          "rowid": "BB",
          "columnid": "service",
          "value": "3"
        }, {
          "rowid": "BB",
          "columnid": "food",
          "value": "4"
        }, {
          "rowid": "BB",
          "columnid": "others",
          "value": "2",
        }]
      }],
      "colorrange": {
        "gradient": "0",
        "minValue": "0",
        "code": "#6da81e",
        "startLabel": "Poor",
        "endLabel": "Good",
        "color": [{
          "code": "#CCF8FF",
          "minValue": "0",
          "maxValue": "2.5",
          "label": "Bad"
        }, {
          "code": "#B5CBFF",
          "minValue": "2.5",
          "maxValue": "4",
          "label": "Average"
        }, {
          "code": "#3A7CFF",
          "minValue": "4",
          "maxValue": "5",
          "label": "Good"
        }]
      }
    }
  }).render();

});

body {
  background-color: #FFFFFF;
}

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://csm.fusioncharts.com/projects/themes/hulk-light.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div id="chart-container">FusionCharts will render here</div>

如何在不在 fusioncharts 热图中添加列和行的情况下放置列标签

How to put column label without adding a column and row in fusioncharts heatmap

charts

heatmap

fusioncharts