私はに新たなんだフュージョンチャートヒートマップ表と私は余分な行/列を追加することなく、最初の列ラベルの前で最後の行ラベルの下にいくつかのテキストを右に置くしようとしているが、私はそうしなかったんです。公式ドキュメントを閲覧しましたが、質問に対する回答が得られませんでした。
このスクリーンショットを見て、私が何を達成しようとしているのかを正確に把握してください。
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]
コメントを追加