Question

如何在Highchart.js制作的条形图中创建一个突出显示栏？

假设我有成功，失败，警告（全部在一个数组中）的条形图，并且成功得分太高，它使错误条相形见绌并且不容易视觉化。如果值＆gt;我想让'错误栏'脱颖而出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）您可以为需要突出显示的点添加数据标签

然而 - 我强烈提醒说这种类型的显示器基本上没用。除非你遇到严重的问题，正如你所看到的那样，这种比较并没有太大的帮助，实际上模糊了你需要注意的一条信息。

这是一种情况，其中列出数字的简单表格在显示您需要的数据类型方面会更有效。

简单明了的事情。例如：

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

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

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

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

1 个答案: