Highcarts - обновить значения определенных категорий - PullRequest
Новая
       8

Highcarts - обновить значения определенных категорий

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

В проекте laravel я использую Highcharts, чтобы показать диаграмму стандартного типа столбца, просто называемого столбцом.xAxis имеет 4 категории, представляющие команды, и yAxis хранит счет каждой команды.Это выглядит так: 

<div id="chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
var chart1 = Highcharts.chart('chart', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'title'
    },
    xAxis: {
        categories: ["f","j","n","s"]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total score'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
});
</script>

Точки добавляются после загрузки страницы с помощью jquery и функции javascript, например: 

$( document ).ready(function() {

    @foreach($existingScores as $score)
        addScoreToChart({!! $score !!})
    @endforeach

});  

function addScoreToChart(obj)
{   
    var scores = obj.params.scores;                  
    var datas = [];    

    for(var k in scores){                
        datas.push([k, parseInt(scores[k])]);      
    }   

    console.log(datas);

    chart1.addSeries({
        name: obj.clientName,
        data: datas,
    });
}

Это отлично работает при начальной загрузкеоценки.Некоторые результаты будут добавлены на график после загрузки страницы (через веб-сокеты).

Я совершенно не уверен, как на самом деле обновить заданный счет команд.Часть websockets работает, и когда добавляется новый счет, я могу вызвать функцию javascript, которая обновляет табло с новыми данными.Как я могу это сделать ?Скажем, например, что для команды "j" добавлен новый результат в 5 баллов.Как бы я сказал Highcharts обновить график такими данными / добавить 5 баллов к «j» существующему счету?

Ответы [ 2 ]

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

Вы можете использовать series.update для обновления серии, эта функция объединит вход с существующей серией.Можно сделать так: 

function updateTeam(obj) {
  let name = obj.params.name;
  let scores = obj.params.scores;
  let datas = [];

  for (let k in scores) {
    datas.push([parseInt(k), parseInt(scores[k])]);
  }
  let tmpSeries = chart.series;
  for (var i = 0; i < tmpSeries.length; i++) {
    if (tmpSeries[i].name == name ) {
      tmpSeries[i].update({
        data: datas
      }, true);
    }
  }
}


var chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'title'
  },
  xAxis: {
    categories: ["f", "j", "n", "s"]
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total score'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: [{
      name: 'team1',
      data: [29.9, 71.5, 106.4, 129.2]
    },
    {
      name: 'team2',
      data: [29.9, 71.5, 106.4, 129.2]
    }, {
      name: 'team3',
      data: [29.9, 71.5, 106.4, 129.2]
    }
  ]
});

function updateTeam(obj) {
	let name = obj.params.name;
  let scores = obj.params.scores;
  let datas = [];

  for (let k in scores) {
    datas.push([parseInt(k), parseInt(scores[k])]);
  }
  let tmpSeries = chart.series;
  for (var i = 0; i < tmpSeries.length; i++) {
    if (tmpSeries[i].name == name ) {
      tmpSeries[i].update({
        data: datas
      }, true);
    }
  }
}

// the button handler
$('#button').click(function() {
  var incomingObj = {
    params: {
      name: 'team1',
      scores: [2.1, 5.6, 150.4, 99.9]
    }
  };
  updateTeam(incomingObj);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Update Series</button>

Рабочая JSfiddle: http://jsfiddle.net/ewolden/Lrxu5u68/2/

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

Вам нужно будет перерисовать диаграмму, насколько я помню, старшие диаграммы не будут смотреть данные для рисования.

Вызовите chart.redraw(), когда из вашего веб-сокета поступают новые данные.

...