Question

在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）。

我很不确定如何实际更新给定的球队得分。 websockets部分正在工作，当添加新分数时，我可以调用javascript函数，用新数据更新记分板。我怎样才能做到这一点？比如说，为团队“j”添加了5分的新分数。我如何告诉Highcharts用这样的数据更新图表/将5点添加到“j”现有分数？

Answer 1

您可以使用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);
    }
  }
}

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

工作JSfiddle： http://jsfiddle.net/ewolden/Lrxu5u68/2/

Answer 2

我需要重新绘制图表，因为我记得highcharts不会看到要绘制的数据。

当您的网络套接字中有新数据时，请致电chart.redraw()。

Highcarts - 更新特定的类别值

2 个答案: