javascript - 在 HighCharts 条形图中突出显示一个条形

Question

如何使 Highchart.js 制作的条形图中的条形突出？

假设我有一个成功、失败、警告(全部在一个数组中)的条形图，并且成功分数太高，它使错误栏相形见绌，并且不易直观。如果值 > 0，我想让“误差线”突出。

              RenderBarChart('service_stats'+x, [
                                            {y:1000, color: 'green', url:'http://www.google.com'},
                                            {y:5, color: 'red', url:'http://www.googl22e.com'},
                                            {y:6, color: 'orange', url:'http://www.googl22e.com'},
                                            {y:7, color: 'yello', url:'http://www.googl22e.com'},
                                            ], 'servidsace_stats');


    function RenderBarChart(elementId, dataList, name) {
            new Highcharts.Chart({

                      chart: {
                          renderTo: elementId,
                          plotBackgroundColor: null,
                          plotBorderWidth: null,
                          plotShadow: true
                      },


        title: {
            text: 'Host Statistics'
        },
        subtitle: {
            text: 'Cluster: Appservers'
        },
        xAxis: {
            categories: ['OK', 'CRITICAL', 'WARNING', 'UNKNOWN'],
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: null,
            },
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: 100,
            y: 100,
            floating: false,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: false
        },
        credits: {
            enabled: false
        },
        series:[{
                        type: 'bar',
                        name: name,
                        data: dataList,
                        cursor: 'pointer',
                         point: {
                                events: {
                                click: function() {
                                location.href = this.options.url;
                    }
                }
            }
                     }]
                 }

增加误差线的宽度没有帮助。缩放高度可能会有所帮助，但无法做到这一点。

Answer 1

您可以做很多事情。

这是一个示例 fiddle ，使用几种不同的技术来突出显示该栏:

http://jsfiddle.net/jlbriggs/78LHt/

1) 您可以在数据点对象中指定颜色。您需要预处理数据以根据具体情况构建适当的数据点

2)您可以为需要突出显示的点添加数据标签

但是 - 我强烈警告这种类型的显示对于此目的基本上是无用的。除非您遇到了严重的问题，正如您所看到的，否则这种比较没有多大帮助，而且实际上掩盖了您需要注意的一条信息。

在这种情况下，列出数字的简单表格将更有效地显示您所需的数据类型。

简单明了的东西。示例:

• http://jsfiddle.net/jlbriggs/ZHw2a/

要重新显示图表，状态历史记录的迷你图会很有用:

• http://jsfiddle.net/jlbriggs/m96rk/