在Highcharts中为每个类别添加图像

时间:2016-01-03 05:36:08

标签: javascript jquery highcharts

我有这段代码:

http://jsfiddle.net/waqLq62d/

让我知道如何将图像放在类别的开头。所以如图所示。

enter image description here

我不知道怎么样,非常感谢你。

$('#container').highcharts({

        xAxis: {
            categories: [data.d[300].nomindicador, data.d[500].nomindicador, data.d[600].nomindicador,data.d[700].nomindicador, data.d[900].nomindicador],
            title: {
                text: null
            },
            labels: {

            align: 'left',
            x: 10,
            y: -20

            }

        },
        yAxis: {

            title: {
                text: 'Resultado',
                 align: 'right'
            }

        },
        tooltip: {
            valueSuffix: ' dollars'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'bottom',
            x: -40,
            y:40 ,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        }

1 个答案:

答案 0 :(得分:2)

要实现此目的,您必须使用useHTML对象上的labels属性并将其设置为true。

然后,您必须使用format属性在标签中注入HTML图像。

这里有完整的工作示例:

http://jsfiddle.net/u3o416xb/

代码看起来像这样:

labels: {
    x: -5,
    y: -20,
    useHTML: true,
    format: '<div style="position: absolute; left: 40px"> my label </div> <img style="height: 30px; width: 30px; margin-top: 10px"  src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}

enter image description here