Question

有三个数据系列，其中两个是条形系列（日照持续时间和功率持续时间）。

当我将数据（从条纹表）导入Highcharts时，条形图高度不能正确显示。它不符合图表的价值，如下所示：

e.g。 2018年5月1日

日照值小于功率值，但功率持续时间条形图的高度高于日照持续时间。

以下是我使用的图表选项：

var ChartObj =
{
    type: "chart",
    value: 
    {
        "chart": { "alignTicks": false, "zoomType": "xy" }, 
        "title": { "text": " ", "floating": false, "align": "center" },                                                     
        "xAxis": 
        [
        { 
            "categories": [],   //PUT LABEL IN HERE 
            "crosshair": true, "index": 0, "isX": true 
        }
        ], 
        "tooltip": { "shared": true }, 
        "legend": 
        { 
            "layout": "horizontal", 
            "align": "right", 
            "x": 0, 
            "verticalAlign": "top", 
            "y": 0, 
            "floating": false, 
            "backgroundColor": "#FFFFFF" 
        }, 
        "yAxis": 
        [
        { 
            "gridLineColor": "transparent", 
            "labels": 
            { 
                "format": "{value}", 
                "style": { "color": "#7cb5ec" }, 
                "enabled": false 
            }, 
            "title": { "text": null, "style": { "color": "#7cb5ec" } }, 
            "opposite": false, 
            "index": 0,
        },          
        { 
            "gridLineColor": "transparent", 
            "labels": 
            { 
                "format": "{value}", 
                "style": { "color": "#90ed7d" }, 
                "enabled": false 
            }, 
            "title": 
            { 
                "text": null, 
                "style": { "color": "#90ed7d" } 
            }, 
            "opposite": true, 
            "index": 1,  
        }, 
        { 
            "gridLineColor": "transparent", 
            "labels": 
            { 
                "format": "{value}", 
                "style": { "color": "#f7a35c" }, 
                "enabled": false 
            }, 
            "title": { "text": null, 
            "style": { "color": "#f7a35c" } }, 
            "opposite": true, 
            "index": 2,   
        }
        ], 
        "series": 
        [
        { 
            // Insolation
            "name": " ",        
            "color": "#90ed7d", 
            "tooltip": 
            { 
                "valueSuffix": "", 
                "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</sup></b><br/>" 
            }, 
            "yAxis": 0, 
            "type": "column", 
            "data": [],         
            "_symbolIndex": 0 
        },
        { 
            // Power
            "name": " ",    
            "color": "#f7a35c", 
            "tooltip": 
            { 
                "valueSuffix": "", 
                "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>" 
            }, 
            "yAxis": 1, 
            "type": "column", 
            "data": [], 
            "_symbolIndex": 1 
        },
        { 
            // PR
            "name": " ", 
            "color": "#7cb5ec", 
            "tooltip": 
            { 
                "valueSuffix": "", 
                "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>" 
            }, 
            "yAxis": 2, 
            "type": "line", 
            "data": [] 
        }
        ] 
    }                                              
};

Answer 1

您需要将max设置为2个第一列轴，如此

{ 
        "gridLineColor": "transparent", 
        "labels": 
        { 
            "format": "{value}", 
            "style": { "color": "#7cb5ec" }, 
            "enabled": false 
        }, 
        "title": { "text": null, "style": { "color": "#7cb5ec" } }, 
        "opposite": false, 
        "index": 0,
        max:12 // The value to set
    },

或者更改系列的索引以使用相同的yAxis

Demo Fiddle

条形图高度错误的条形图

1 个答案: