Question

我有一个图表，显示一个项目收到的评分数量1 - 5（1星，2星等），但我无法在图表上正确显示。这是我最接近它的显示方式：

$('#chartdiv').highcharts({
    chart: {
        type: "column"
    },
    title: {
        text: 'My Ads'
    },
    xAxis: {
        categories: ["1 Star", "2 Stars", "3 Stars", "4 Stars", "5 Stars"],
        tickInterval: 1,
        labels: {
            rotation: -20,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        "min": 0,
        "title": {
            "text": "Number of Ratings"
        }
    },
    series: [{
        "name": "1 Stars",
        "data": [10]
    }, {
        "name": "2 Stars",
        "data": [42]
    }, {
        "name": "3 Stars",
        "data": [60]
    }, {
        "name": "4 Stars",
        "data": [110]
    }, {
        "name": "5 Stars",
        "data": [100]
    }],
    tooltip: {
        //shared: true,
        crosshairs: false
    },
    series: series,
});

这就是它的样子：

Output

我怎么能让它看起来那样，但是有所有的标签？我也试过使用这样的数据集：

[{
    "data": [10, 0, 0, 0, 0]
}, {
    "data": [0, 42, 0, 0, 0]
}, {
    "data": [0, 0, 60, 0, 0]
}, {
    "data": [0, 0, 0, 110, 0]
}, {
    "data": [0, 0, 0, 0, 100]
}],

它给了我这个输出

Graph 2

那些距离太远，所以基本上我怎么能像第一张图像一样显示它，但每个数据集中有一个项目？

------------
的更新：
的 ------------

这个系列适合我。我唯一的问题是它在工具提示中显示Series 1: 10（图像有点模糊，对不起）。

Graph 3

"series": [{
        "data": [{
                "name": "1 Star",
                "y": 10
            }, {
                "name": "2 Stars",
                "y": 42
            }, {
                "name": "3 Stars",
                "y": 60
            }, {
                "name": "4 Stars",
                "y": 110
            }, {
                "name": "5 Stars",
                "y": 100
            }]
    }],

Answer 1

您可以尝试使用这些设置（尝试使用pointWidth - 列的宽度）

     plotOptions: {
            series: {
                pointPadding: 0.2,
                groupPadding: 0,
                pointWidth: 50//width of the column
            },
            column: {
                        pointPadding: 0,
                        borderWidth: 0
                    }
        },
     tooltip: {
        formatter: function() {
        return 'The value for <b>' + this.x + '</b> is <b>'+ '</b>, in series '+ this.series.name;
    }

更新 - 我添加了自定义工具提示

Answer 2

我能够使用这个系列获得我想要的东西：

"series": [{
        "name": "Number of Ratings",
        "data": [{
                "name": "1 Star",
                "y": 10
            }, {
                "name": "2 Stars",
                "y": 42
            }, {
                "name": "3 Stars",
                "y": 60
            }, {
                "name": "4 Stars",
                "y": 110
            }, {
                "name": "5 Stars",
                "y": 100
            }]
    }],

Highcharts具有不同系列的相同类型的数据

2 个答案: