Question

我是Fusion Charts Heat Map Table的新用户，我试图在第一列标签前面的最后一行标签下放置一些文字，而不添加额外的行/列，但是我是＆＃39;我没有这样做。我浏览了官方文档，但无法得到我的问题的答案。

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

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

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

<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.IsVisible = false;
            $scope.GenerateTable = function () {
                $scope.Customers = [
                {unit: 100, amount: 1000},
                { unit: 200,amount: 2000},
                {unit: 300,amount: 3000},
                { unit: 400,amount: 4000}
               ];

                $scope.IsVisible = true;
              };    
        });

        app.directive("limitToMax", function() {
  return {
    link: function(scope, element, attributes) {
      element.on("keydown keyup", function(e) {

    if (Number(element.val()) > Number(attributes.max) &&
          e.keyCode != 46 // delete
          &&
          e.keyCode != 8 // backspace
        ) {
          scope.val=true;
          e.preventDefault();
          element.val(attributes.max);
        }
      });
    }
  };
});

    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Generate Table" ng-click="GenerateTable()" />
        <hr />
        <table cellpadding="0" cellspacing="0" ng-show="IsVisible">
            <tr>
                <th>Unit</th>
                <th>Amount</th>
                <th>Checkbox1</th>
                <th>Checkbox2</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.unit}}</td>
                    <td>{{m.amount}}</td>
                    <td><input type="checkbox"ng-model="checkbox1[$m]"</td>
                    <td><input type="checkbox"ng-model="checkbox2[$m]"</td>
                    <td><input type="number" ng-model="myVar[$m]" min="1" max="{{m.unit}}" limit-to-max /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

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

{
            "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;
}

如何在不在fusioncharts heatmap

1 个答案: