在热图图中，x轴的值在融合图中不显示
In heat map chart value of x-axis are not displaying in fusion charts
我在我的应用程序中使用角融合图表指令。我从其中一个例子中创建了一个热图。我被卡住了，因为在我的应用程序中，x轴的值没有显示。我找不到这个有什么问题。
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '470',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Downtime Reasons",
"bgColor": "ffffff",
"outCnvBaseFontSize": "10",
"outCnvBaseFontColor": "000000",
"canvasBgColor": "ffffff",
"toolTipColor": "ffffff",
"showXaxisLabels": "1",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"hdivLineColor": "e8700e",
"vdivLineColor": "e8700e",
"showborder": "0",
"showPlotBorder": "1",
"plotBorderColor": "e8700e",
"canvasBorderColor": "e8700e"
},
"columns": {
"column": [
{
"id": "1123741",
"label": "order 1123741"
},
{
"id": "858546",
"label": "order 858546"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "Limpieza Input",
"columnid": "1123741",
"value": "1",
"tllabel": "Limpieza Input",
"trlabel": "Order #1123741"
},
{
"rowid": "Marcha Input",
"columnid": "858546",
"value": "27",
"tllabel": "Marcha Input",
"trlabel": "Order #858546"
},
{
"rowid": "Averia KKE Input",
"columnid": "858546",
"value": "2",
"tllabel": "Averia KKE Input",
"trlabel": "Order #858546"
},
{
"rowid": "Documentacion Input",
"columnid": "858546",
"value": "1",
"tllabel": "Documentacion Input",
"trlabel": "Order #858546"
},
{
"rowid": "Cambio (Set-Up) Input",
"columnid": "858546",
"value": "7",
"tllabel": "Cambio (Set-Up) Input",
"trlabel": "Order #858546"
},
{
"rowid": "Limpieza Input",
"columnid": "858546",
"value": "5",
"tllabel": "Limpieza Input",
"trlabel": "Order #858546"
},
{
"rowid": "Mantenimiento planificado Input",
"columnid": "858546",
"value": "1",
"tllabel": "Mantenimiento planificado Input",
"trlabel": "Order #858546"
},
{
"rowid": "No laborable Input",
"columnid": "858546",
"value": "5",
"tllabel": "No laborable Input",
"trlabel": "Order #858546"
},
{
"rowid": "Sin trabajo Input",
"columnid": "858546",
"value": "14",
"tllabel": "Sin trabajo Input",
"trlabel": "Order #858546"
},
{
"rowid": "ST Maq. parada",
"columnid": "858546",
"value": "1",
"tllabel": "ST Maq. parada",
"trlabel": "Order #858546"
}
]
}
],
"colorrange": {
"gradient": "1",
"minvalue": "1",
"code": "fce797",
"startlabel": "Low",
"endlabel": "High",
"color": [
{
"maxvalue": "4",
"code": "f74c25",
"label": "Medium"
},
{
"code": "c71610",
"maxvalue": "7"
}
]
}
}
})
.render();
});
这是Demo小提琴
如有任何帮助，不胜感激。
编辑
在将列id 1123741更改为112741并删除整个列对象后，我感到惊讶。这是工作。因为我不能改变数据明显，我想找到为什么它不工作!!(
FusionCharts.ready(function () {
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '470',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Downtime Reasons",
"bgColor": "ffffff",
"outCnvBaseFontSize": "10",
"outCnvBaseFontColor": "000000",
"canvasBgColor": "ffffff",
"toolTipColor": "ffffff",
"showValues": "1",
"xAxisLabelsOnTop": "1",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"hdivLineColor": "e8700e",
"vdivLineColor": "e8700e",
"showborder": "0",
"showPlotBorder": "1",
"plotBorderColor": "e8700e",
"canvasBorderColor": "e8700e"
},
"rows": {
"row": [
{
"id": "r1",
"label": "Limpieza Input"
},
{
"id": "r2",
"label": "Marcha Input"
}
]
},
"columns": {
"column": [
{
"id": "c1",
"label": "order 1123741"
},
{
"id": "c2",
"label": "order 858546"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "r1",
"columnid": "c1",
"value": "1"
},
{
"rowid": "r1",
"columnid": "c2",
"value": "27"
}
]
}
],
"colorrange": {
"gradient": "1",
"minvalue": "1",
"code": "fce797",
"startlabel": "Low",
"endlabel": "High",
"color": [
{
"maxvalue": "4",
"code": "f74c25",
"label": "Medium"
},
{
"code": "c71610",
"maxvalue": "7"
}
]
}
}
})
.render();
});
尝试将alpha数值id设置为列id。参考:http://bit.ly/1GXrzvs
我希望这对你有帮助
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '470',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Downtime Reasons",
"bgColor": "ffffff",
"outCnvBaseFontSize": "10",
"outCnvBaseFontColor": "000000",
"canvasBgColor": "ffffff",
"toolTipColor": "ffffff",
"showXaxisLabels": "1",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"hdivLineColor": "e8700e",
"vdivLineColor": "e8700e",
"showborder": "0",
"showPlotBorder": "1",
"plotBorderColor": "e8700e",
"canvasBorderColor": "e8700e"
},
"columns": {
"column": [
{
"id": "a",
"label": "order 1123741"
},
{
"id": "b",
"label": "order 858546"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "Limpieza Input",
"columnid": "a",
"value": "1",
"tllabel": "Limpieza Input",
"trlabel": "Order #1123741"
},
{
"rowid": "Marcha Input",
"columnid": "b",
"value": "27",
"tllabel": "Marcha Input",
"trlabel": "Order #858546"
},
{
"rowid": "Averia KKE Input",
"columnid": "b",
"value": "2",
"tllabel": "Averia KKE Input",
"trlabel": "Order #858546"
},
{
"rowid": "Documentacion Input",
"columnid": "b",
"value": "1",
"tllabel": "Documentacion Input",
"trlabel": "Order #858546"
},
{
"rowid": "Cambio (Set-Up) Input",
"columnid": "b",
"value": "7",
"tllabel": "Cambio (Set-Up) Input",
"trlabel": "Order #858546"
},
{
"rowid": "Limpieza Input",
"columnid": "b",
"value": "5",
"tllabel": "Limpieza Input",
"trlabel": "Order #858546"
},
{
"rowid": "Mantenimiento planificado Input",
"columnid": "b",
"value": "1",
"tllabel": "Mantenimiento planificado Input",
"trlabel": "Order #858546"
},
{
"rowid": "No laborable Input",
"columnid": "b",
"value": "5",
"tllabel": "No laborable Input",
"trlabel": "Order #858546"
},
{
"rowid": "Sin trabajo Input",
"columnid": "b",
"value": "14",
"tllabel": "Sin trabajo Input",
"trlabel": "Order #858546"
},
{
"rowid": "ST Maq. parada",
"columnid": "b",
"value": "1",
"tllabel": "ST Maq. parada",
"trlabel": "Order #858546"
}
]
}
],
"colorrange": {
"gradient": "1",
"minvalue": "1",
"code": "fce797",
"startlabel": "Low",
"endlabel": "High",
"color": [
{
"maxvalue": "4",
"code": "f74c25",
"label": "Medium"
},
{
"code": "c71610",
"maxvalue": "7"
}
]
}
}
})
salesHMChart.render();
});
FusionCharts.ready(function () {
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '470',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Downtime Reasons",
"bgColor": "ffffff",
"outCnvBaseFontSize": "10",
"outCnvBaseFontColor": "000000",
"canvasBgColor": "ffffff",
"toolTipColor": "ffffff",
"showXaxisLabels": "1",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"hdivLineColor": "e8700e",
"vdivLineColor": "e8700e",
"showborder": "0",
"showPlotBorder": "1",
"plotBorderColor": "e8700e",
"canvasBorderColor": "e8700e"
},
"rows": {
"row": [
{
"id": "Limpieza Input",
"label": "Limpieza Input"
},
{
"id": "Marcha Input",
"label": "Marcha Input"
},
{
"id": "Averia KKE Input",
"label": "Averia KKE Input"
},
{
"id": "Documentacion Input",
"label": "Documentacion Input"
},
{
"id": "Cambio (Set-Up) Input",
"label": "Cambio (Set-Up) Input"
},
{
"id": "Mantenimiento planificado Input",
"label": "Mantenimiento planificado Input"
},
{
"id": "No laborable Input",
"label": "No laborable Input"
},
{
"id": "Sin trabajo Input",
"label": "Sin trabajo Input"
},
{
"id": "ST Maq. parada",
"label": "ST Maq. parada"
}
]
},
"columns": {
"column": [
{
"id": "1123741",
"label": "order 1123741"
},
{
"id": "858546_0",
"label": "order 858546"
},
{
"id": "858546_1",
"label": "order 858546"
},
{
"id": "858546_2",
"label": "order 858546"
},
{
"id": "858546_3",
"label": "order 858546"
},
{
"id": "858546_4",
"label": "order 858546"
},
{
"id": "858546_5",
"label": "order 858546"
},
{
"id": "858546_6",
"label": "order 858546"
},
{
"id": "858546_7",
"label": "order 858546"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "Limpieza Input",
"columnid": "1123741",
"value": "1",
"tllabel": "Limpieza Input",
"trlabel": "Order #1123741"
},
{
"rowid": "Marcha Input",
"columnid": "858546_0",
"value": "27",
"tllabel": "Marcha Input",
"trlabel": "Order #858546"
},
{
"rowid": "Averia KKE Input",
"columnid": "858546_1",
"value": "2",
"tllabel": "Averia KKE Input",
"trlabel": "Order #858546"
},
{
"rowid": "Documentacion Input",
"columnid": "858546_2",
"value": "1",
"tllabel": "Documentacion Input",
"trlabel": "Order #858546"
},
{
"rowid": "Cambio (Set-Up) Input",
"columnid": "858546_3",
"value": "7",
"tllabel": "Cambio (Set-Up) Input",
"trlabel": "Order #858546"
},
{
"rowid": "Mantenimiento planificado Input",
"columnid": "858546_4",
"value": "1",
"tllabel": "Mantenimiento planificado Input",
"trlabel": "Order #858546"
},
{
"rowid": "No laborable Input",
"columnid": "858546_5",
"value": "5",
"tllabel": "No laborable Input",
"trlabel": "Order #858546"
},
{
"rowid": "Sin trabajo Input",
"columnid": "858546_6",
"value": "14",
"tllabel": "Sin trabajo Input",
"trlabel": "Order #858546"
},
{
"rowid": "ST Maq. parada",
"columnid": "858546_7",
"value": "1",
"tllabel": "ST Maq. parada",
"trlabel": "Order #858546"
}
]
}
],
"colorrange": {
"gradient": "1",
"minvalue": "1",
"code": "fce797",
"startlabel": "Low",
"endlabel": "High",
"color": [
{
"maxvalue": "4",
"code": "f74c25",
"label": "Medium"
},
{
"code": "c71610",
"maxvalue": "7"
}
]
}
}
})
.render();
});
相关文章：
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 谷歌地图/融合表Javascript HTML赢得't显示/可视化所有多边形数据(通过色标）
- 使用谷歌融合表格地图的网页文本/JavaScript未显示
- 谷歌地图 API - 融合表图层示例 - 地图未显示
- 融合表地图未显示在移动版网站上
- 显示"加载数据”;在融合图表中
- 融合图表显示导出对话框未显示在javascript中
- 谷歌地图-显示基于缩放级别的融合表图层
- 融合表地图-如何显示信息窗口进一步在谷歌地图上
- 如何刷新融合层和过滤显示的标记
- 谷歌地图与融合表标记不显示在Chrome浏览器
- 显示特定的名片从融合表到谷歌网站
- 融合piechart数据不显示(无数据显示)
- 如何自定义融合图中堆叠柱状图的显示值
- 在热图图中，x轴的值在融合图中不显示
