【问题标题】:In heat map chart value of x-axis are not displaying in fusion charts在热图中,x 轴的值未显示在融合图中
【发布时间】:2015-09-01 20:09:36
【问题描述】:

我在我的应用程序中使用了角度融合图表指令。我从其中一个示例中创建了热图图表。我被困在我的应用程序中,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();
});

这里是演示Fiddle

任何帮助将不胜感激。

编辑

在将列 ID 1123741 更改为 112741 并删除整个列对象后,我感到很惊讶。它正在工作。由于我显然无法更改数据,我想找出它为什么不起作用! :(

【问题讨论】:

  • 非常有趣的问题。好吧,当您没有明确定义行和列对象时,Heatmap 会尝试从数据中获取它(自动)。在这里,您定义了行部分而不是列,它可能会混淆。但是完全删除列部分应该可以使其正常工作。令人惊讶的是,我还没有弄清楚为什么这个问题与那个特定的号码有关。如果您将第一个对象一个接一个地放置,问题也会消失。似乎是个问题。
  • @pallabB 是的,这似乎是个问题。我也在融合图表论坛上发帖。他们说 columnid 中的位数应该相同,但不应该像预期的那样,因此他们将此问题传递给了开发团队。让我们看看他们现在说了什么。

标签: javascript angularjs fusioncharts


【解决方案1】:
    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();
});

【讨论】:

  • 看起来你已经改变了我的几乎数据并以不同的方式实现。你能告诉我我的代码有什么问题吗?为了完成这项工作,我应该怎么做?
  • 您必须在我们的产品中添加“rows”属性。因为 fusioncharts 有一些属性可以让你用不同的风格渲染你的图表。 .这里“rows”属性作为 yaxis 标签,“columns”作为 xaxis 标签..
【解决方案2】:

尝试将字母数字 id 设置为列 id 。参考这个:http://bit.ly/1GXrzvs

【讨论】:

    【解决方案3】:

    希望对你有帮助

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

    【讨论】:

    • 能否请您详细说明您的答案,添加更多关于您提供的解决方案的描述?
    【解决方案4】:
    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();
    });
    

    【讨论】:

    • 为什么要更改数据?如果需要更改,请说明问题所在。
    猜你喜欢
    • 1970-01-01
    • 2018-03-24
    • 1970-01-01
    • 1970-01-01
    • 2022-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多