Fusionchartsヒートマップに列と行を追加せずに列ラベルを配置する方法

アサドウラーCh

私はに新たなんだフュージョンチャートヒートマップ表と私は余分な行/列を追加することなく、最初の列ラベルの前で最後の行ラベルの下にいくつかのテキストを右に置くしようとしているが、私はそうしなかったんです。公式ドキュメントを閲覧しましたが、質問に対する回答が得られませんでした。

このスクリーンショットを見て、私が何を達成しようとしているのかを正確に把握してください。

**ここのテキスト**エリアを確認してください

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

});

これが私のフィドルです

前もって感謝します。

アヤン

心配はいりません。注釈を使用して同じことを実現できます。注釈は、テキスト/形状/画像などにすることができます。これが役立つ場合があります。

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Seabornヒートマップの横に列を追加する方法

分類Dev

ヒートマップで目盛りとラベルを中央に配置する方法

分類Dev

シーボーンヒートマップカラーバーにラベルを追加する方法

分類Dev

ヒートマップヒートマップに追加の列を作成する方法

分類Dev

MATLAB:ループせずに行と列のインデックスのベクトルを適用する

分類Dev

7列ごとに行をヒートマップに挿入する

分類Dev

HeatMap:行のみをクラスター化し、ヒートマップの列ラベルの順序をdfと同じに保つ方法は?

分類Dev

matplotlibのヒートマップから軸と列のラベルがにじむのを防ぎます

分類Dev

ヒートマップの下部にキー値と凡例を配置する方法

分類Dev

不完全なフォーマット指定子をトリガーせずにラベルに「%」を追加する

分類Dev

ラップせずにブートストラップ列の間にマージンを追加するにはどうすればよいですか

分類Dev

ヒートマップで行ラベルを斜体にします。2

分類Dev

ループを使用せずに配列に値を追加する

分類Dev

列を1行に配置する方法(ブートストラップテーブル)

分類Dev

バブルマップに州ごとに、行/列にバブルを配置する方法

分類Dev

列を追加せずにGoogleスプレッドシートの列ごと、次に行ごとに集計

分類Dev

ヒートマップに値を追加する方法

分類Dev

Rのメインヒートマップの横に単一列ヒートマップを追加する方法

分類Dev

ヒートマップセルに注釈を追加する方法は?

分類Dev

Seabornヒートマップで列と行を設定するにはどうすればよいですか?

分類Dev

ヒートマップのgnuplot値にラベルを表示する

分類Dev

ループを使用せずにベクトルから文字列を抽出する

分類Dev

マットテーブルに列を追加する方法-Angular?

分類Dev

ヒートマップから列を非表示にする

分類Dev

データベース配列リストからGoogleマップにマーカーを追加する方法

分類Dev

ループで実行せずに配列をmysqlに挿入する方法

分類Dev

ヒートマップのようなプロットに期待される色の列を追加する(seaborn)

分類Dev

マージ/リベースせずにアップストリームをプルする方法

分類Dev

イベントリスナーをマップマーカー[ ]配列に追加する方法

Related 関連記事

  1. 1

    Seabornヒートマップの横に列を追加する方法

  2. 2

    ヒートマップで目盛りとラベルを中央に配置する方法

  3. 3

    シーボーンヒートマップカラーバーにラベルを追加する方法

  4. 4

    ヒートマップヒートマップに追加の列を作成する方法

  5. 5

    MATLAB:ループせずに行と列のインデックスのベクトルを適用する

  6. 6

    7列ごとに行をヒートマップに挿入する

  7. 7

    HeatMap:行のみをクラスター化し、ヒートマップの列ラベルの順序をdfと同じに保つ方法は?

  8. 8

    matplotlibのヒートマップから軸と列のラベルがにじむのを防ぎます

  9. 9

    ヒートマップの下部にキー値と凡例を配置する方法

  10. 10

    不完全なフォーマット指定子をトリガーせずにラベルに「%」を追加する

  11. 11

    ラップせずにブートストラップ列の間にマージンを追加するにはどうすればよいですか

  12. 12

    ヒートマップで行ラベルを斜体にします。2

  13. 13

    ループを使用せずに配列に値を追加する

  14. 14

    列を1行に配置する方法(ブートストラップテーブル)

  15. 15

    バブルマップに州ごとに、行/列にバブルを配置する方法

  16. 16

    列を追加せずにGoogleスプレッドシートの列ごと、次に行ごとに集計

  17. 17

    ヒートマップに値を追加する方法

  18. 18

    Rのメインヒートマップの横に単一列ヒートマップを追加する方法

  19. 19

    ヒートマップセルに注釈を追加する方法は?

  20. 20

    Seabornヒートマップで列と行を設定するにはどうすればよいですか?

  21. 21

    ヒートマップのgnuplot値にラベルを表示する

  22. 22

    ループを使用せずにベクトルから文字列を抽出する

  23. 23

    マットテーブルに列を追加する方法-Angular?

  24. 24

    ヒートマップから列を非表示にする

  25. 25

    データベース配列リストからGoogleマップにマーカーを追加する方法

  26. 26

    ループで実行せずに配列をmysqlに挿入する方法

  27. 27

    ヒートマップのようなプロットに期待される色の列を追加する(seaborn)

  28. 28

    マージ/リベースせずにアップストリームをプルする方法

  29. 29

    イベントリスナーをマップマーカー[ ]配列に追加する方法

ホットタグ

アーカイブ