在Highcharts的每个类别中放置一个图像 [英] putting an image in each category in Highcharts

问题描述

我有这样的代码：

我不知道如何，非常感谢。

  $（'＃container'）。highcharts（{
 
 xAxis：{
类别：[data.d [300] .nomindicador，data.d [500] .nomindicador，data.d [600] .nomindicador，data.d [700] .nomindicador ，data.d [900] .nomindicador]，
标题：{
 text：null 
}，
标签：{
 
 align：'left '，
x：10，
y：-20 
 
} 
 
}，
 y轴：{
 
 title：{
 text：'Resultado'，
 align：'right'
} 
 
}，
 tooltip：{
 valueSuffix： '做llars'
}，
 plotOptions：{
 bar：{
 dataLabels：{
 enabled：false 
} 
} 
 }，
 legend：{
 layout：'vertical'，
 align：'center'，
 verticalAlign：'bottom'，
x：-40，
y：40，
 floating：true，
 borderWidth：1，
 backgroundColor：'#FFFFFF'，
 shadow：true 
} 
  useHTML来实现这个功能。    标签对象上的属性，并将其设置为true。然后，你必须使用格式属性在标签中插入一个HTML图像。
 
 
 
 完整示例：  
 
 
  
 
I have this code:

http://jsfiddle.net/waqLq62d/

and let me know how to put an image at the beginning of the category. so as it is shown in this picture.



I do not know how, thank you very much.
$('#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
        }

解决方案
To achieve this, you have to have to use the useHTML property on the labels object and set it to true. 

Then, you have to use the format property to inject an HTML image in your label.

Full working example here:

http://jsfiddle.net/u3o416xb/

The code should look something like this:
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>'
}


                        
这篇关于在Highcharts的每个类别中放置一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！