在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

你可以做很多事情。

这是一个example fiddle ，使用几种不同的技术突出显示栏：

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

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

2）您可以将数据标签添加到需要突出显示的点

但是 - 我强烈警告说，这种类型的显示器基本上没用于此目的。 除非你遇到严重的问题，正如你所见，这种比较并没有太大的帮助，事实上它完全掩盖了你需要注意的一条信息。

这是列出数字的简单表格在显示所需数据类型方面更有效的情况之一。

简单明了的东西。 exampe：

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

要重新使用图表，状态历史记录的亮点将非常有用：

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