Question

使用Highcharts给出如下的项目符号图：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bullet-graph

是否可以有多个目标值？
我们正在努力跟踪针对某个特定目标的许多目标。
如何更改条形的宽度？我似乎找不到设置，有目标设置，但是找不到适合酒吧的合适设置。

以下是图表代码：

Highcharts.chart('container1', {
    chart: {
        marginTop: 40
    },
    title: {
        text: '2017 YTD'
    },
    xAxis: {
        categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 150,
            color: '#666'
        }, {
            from: 150,
            to: 225,
            color: '#999'
        }, {
            from: 225,
            to: 9e9,
            color: '#bbb'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 275,
            target: 250
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

Answer 1

是否可以有多个目标值？

是的，但是在这种情况下，您将有多个轴。您不能在一个轴上有多个目标，因为target仅接受整数。为此，您可以在series中添加其他数据，例如：

series: [{
    data: [{
        y: 275,
        target: 250,
    }, {
        y: 275,
        target: 240,
    }]
}]

Documentation
可以通过在“类别”数组中添加文本来设置xAxis上的标签：

categories: [
    '<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)',
    '<span class="hc-cat-title">Profit</span><br/>U.S. $ (1,000s)'
]

如何更改条形的宽度

这可以通过设置pointWidth属性来完成，例如：

plotOptions: {
    series: {
        pointWidth: 15
    }
}

您可以在设置了这些选项的情况下看到此jsFiddle。

Answer 2

Highcharts中没有添加两个目标的功能，但是通过对drawPoints bullet系列原型函数进行一些棘手的覆盖，可以达到预期的效果。这是使用它的示例：http://jsfiddle.net/BlackLabel/6wvbc1kb/

应用此替代之后，您应该可以在点对象内设置minTarget字段。然后第二个目标指标将出现在图表上。

高图中的项目符号图表配置

2 个答案: