2015-09-10 12 views
0

Я создал Pie Chart, используя Highcharts. У меня есть title, и мне нужно ввести название серии данных внутри заголовка. Так вот так:Как пройти серию highchart на highchart?

title: { 
    text: 'Data name: {name}', 
    align: 'center', 
    useHTML: true, 
    verticalAlign: 'middle', 
    y: -70 
}, 

series: [{ 
    type: 'pie', 
    name: 'Some name to be injected inside the title', 
    innerSize: '70%', 
    data: [] 
}] 

Можно ли это сделать?

ответ

1

Я бы сделал это, сначала идентифицировав или получив имя серии и присвоив ее переменной, которая будет использоваться в параметрах конфигурации диаграммы.

Независимо от того, какой метод вы используете для извлечения или обработки данных для объекта серии на диаграмме, вы должны предоставить вам имя для использования независимо.

Как:

//process data... 
var seriesData = [['Group A', 1598],['Group B', 872],['Group C', 321]]; 
var seriesName = 'Chart Series Name'; 

$(function() { 
    $('#container').highcharts({ 
     chart  : { type : 'pie' }, 
     title  : { text : seriesName }, 
     subtitle : { text : null }, 
     tooltip  : { }, 
     plotOptions : { }, 
     series  : [{ 
      name : seriesName, 
      data : seriesData 
     }] 
    }); 
}) 

Пример:

0

Нет прямого способа сделать это. Я предлагаю использовать событие нагрузки Highcharts:

chart: { 
     /* some other code */ 
     events: { 
      load: function() { 
       //collect information 
       var title_old = this.title.textStr, 
        title_new, 
        substitute= this.series[0].name, 
        needle = '{name}'; 
       //replaceing 'needle' with 'substitute' 
       title_new = title_old.replace(needle,substitute); 
       //set title 
       this.setTitle({ text: title_new}); 
      } 
     } 
    } 

Подсказки:

  • работает только если у вас есть один ряд (см в коде: серии [0])
  • протестирована с Highcharts JS v4.1.8 (2015-08-20)
  • для получения информации о String.prototype.replace() здесь смотрите [1]

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

+0

Вы можете вводить, в то время как график вызова можно передать имя как параметры и использовать это имя в диаграмме конфигурации –

+0

я понял вопрос по-разному. Если вы знаете имя серии, то подходит решение, подобное заданию jlbriggs. Но если вы используете Ajax и не знаете названия серии, вы можете использовать мое решение, приведенное выше. http://jsfiddle.net/84ek687h/6/ – Luxx

+0

Luxx - я хочу сказать, что вам не нужно «знать» это раньше времени. Если вы возвращаете данные ajax, содержащие имя серии, вы можете вытащить его и отправить на диаграмму в качестве заголовка, прежде чем строить диаграмму (или обновить ее, если вы будете динамически изменять диаграмму). В любом случае, отделив конфигурацию диаграммы и обработку данных, у вас будет достаточно гибкости, чтобы сделать это динамически. – jlbriggs

Смежные вопросы