Question

我正在尝试找到一种解决方案，可以在每个栏的顶部设置图像。此刻我还没有找到解决方案。

我尝试过：

要设置图像，方法是添加一个新的'scatter'系列，其值与条形图系列相同，并添加一个以图像为符号的标记。但是，如果我有多个“ bar”类型的序列，则分散序列的点设置在中间，而不是在每个bar的顶部。如果系列链接到同一类别，我也想保留分组。 const weather_serie = { type: 'scatter', data: this.visualisationService .generate_serie(this.categories[elem], weather, this.period) .map((val, index) => { if (val.hasOwnProperty('weather')) { return { y: isNaN(visit_serie.data[index]) ? 0 : visit_serie.data[index], marker: { symbol: 'url(https://openweathermap.org/img/w/${ val.weather }.png)' } }; } else { return NaN; } }), enableMouseTracking: false, showInLegend: true };
要添加图像标签并在图表选项中设置其格式来设置图像。但是我没有找到如何设置链接到同一类别中正确条形图的唯一图像的方法。其他一些说明是图像不在条形图的中间（从图像的左下角开始），并且当鼠标悬停时，工具提示显示在图像的后面。 plotOptions: { bar:{ dataLabels: { align: 'center', enabled: true, useHTML: true, formatter: function() { return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> '; } } }

Answer 1

在第一种情况下，应禁用系列上的grouping：

plotOptions: {
    series: {
        grouping: false
    }
}

实时演示：http://jsfiddle.net/BlackLabel/v7qx1s5u/

在第二种情况下，您可以为点定义单个数据标签：

series: [{
    type: 'column',
    data: [{
            x: 0,
            y: 1,
            dataLabels: {
                align: 'center',
                enabled: true,
                useHTML: true,
                formatter: function() {
                    return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>';
                }
            }
        },
        [1, 2],
        [2, 3]
    ]
}]

或在formatter函数中定义一些规则，其中数据标签应为某些图像：

    dataLabels: {
        align: 'center',
        enabled: true,
        useHTML: true,
        formatter: function(){
            if (this.point.index === 1){
                return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>&nbsp;';
            }

        }
    }

实时演示：http://jsfiddle.net/BlackLabel/72Lahvp4/

高图：如何在条形图系列上设置独特的图像

1 个答案: