верхний график: добавлять изображения в верхнюю часть графика в каждом столбце

Question

Кто-нибудь знает, возможно ли создать что-то подобное в Highcharts :

Речь идет о значках погоды наверху.Я добавил их как «точечный график», что приятно, поэтому изображения / график можно отключить.Но я хочу, чтобы они всегда были наверху.Например: у = 20 пикселей или что-то.Возможно ли это сделать с помощью Highchart?Я знаю, установите их данные на «30 градусов Цельсия», но это может испортить график, если температура поднимется до 30 градусов.

Answer 1

Вы можете использовать трюк, состоящий из двух осей X, одна с изображениями и смещенными относительно верхней части диаграммы, а другая с обычными метками внизу:

xAxis: [{
    offset: -290,
    tickWidth: 0,
    lineWidth: 0,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
        x: 5,
        useHTML: true,
        formatter: function () {
            return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;';
        }
    }
}, {
    linkedTo: 0,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],

Полный пример по jsfiddle

Answer 2

Я нашел решение случайно из-за регистрационного кода, который я забыл удалить. Вы можете получить доступ к данным внутри средства форматирования, используя «this»:

...
plotOptions: {
    series: {
        dataLabels: {
            useHTML: true,
            enabled: true,
            x: -50,
            y: -50,
            formatter: function(){
                console.log(this);
                return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
            },
        }
    ...

Этот код, конечно, не работает, но показывает идею, не так ли? Надеюсь, это поможет!

Answer 3

Вы можете использовать Renderer.image () для добавления изображений в любое место на графике

http://api.highcharts.com/highcharts#Renderer.image()

Answer 4

Вы можете добавить еще один scatter график к вашему series, который содержит конкретные markers: http://jsfiddle.net/ZZ7Kd/135/

Answer 5

Учитывая, что старшие чарты - это просто SVG, вы всегда можете перейти напрямую и манипулировать SVG, чтобы показать нужные вам изображения, обычно просто с помощью CSS .Вы можете проверить диаграмму с помощью веб-инспектора Chrome и найти элементы, которые хотите стилизовать.Я должен предупредить вас, однако, что в прошлом я самостоятельно настраивал высокие графики, что затрудняло переход на более новые версии.