Angular2, как сделать highchart слишком большой формат - PullRequest
Новая
       11

Angular2, как сделать highchart слишком большой формат

0 голосов
/ 17 мая 2018

В серии я использовал 

series: [
        {
          name: 'High usage',
          data: highUsage,
          color: '#009DDB'
        },
        {
          name: 'Normal usage',
          data: normalUsage,
          color: '#83C580'
        }
]

Во всплывающей подсказке 

tooltip: { 
    crosshairs: [true, true], 
    formatter: function() { 

    }
}

Мой формат JSON 

"data": {
    "low_usage": [
      {
        "percentage": 77.9,
        "machine": 3
      },
      {
        "percentage": 22.8,
        "machine": 1
      }
    ],

здесь все работает нормально, но мне нужно показать количество машин, также во всплывающей подсказке, например Процент: 100% (3 машины)
Что я должен делать в форматере. 

{
"data":{
  "normal_usage":[  
     {  
        "machine":1,
        "percentage":4.3
     },
     {  
        "machine":0,
        "percentage":0
     }
  ],
  "high_usage":[  
     {  
        "machine":0,
        "percentage":0
     },
     {  
        "machine":0,
        "percentage":0
     }
  ]
},
"error_path":"no error",
"success":true
}

Это мой формат ввода. Я отправляю данные, основываясь на высокой и низкой загрузке

1 Ответ

0 голосов
/ 22 мая 2018

Вам необходимо добавить больше атрибутов к данным серии, как показано ниже: 

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
     tooltip: {
    crosshairs: [true, true], 
        formatter: function () {
        console.log(this)
            return 'value x ' + this.x +
                'value y ' + this.y + 'value percentage '+this.percentage + '<br/>' + this.point.machine;
        }
    },
    xAxis: {
        categories: ['Green', 'Pink']
    },

    series: [{
        data: [{
            name: 'Point 1',
            color: '#00FF00',
            percentage:"90",
            machine: 153,
            y: 1
        }, {
            name: 'Point 2',
            color: '#FF00FF',
             percentage:"80",
             machine: 153,
            y: 5
        }]
    }]
});

Проверьте, как я передал percentage и machine в объект данных серии, чтобы эти атрибуты были доступны во всплывающей подсказке.функция форматирования с использованием this.

Рабочая демо

...