0

我在来自 javascript 的 Ajax 调用中得到以下 json 字符串：-

var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];

我想用上面给定的数据填充我的一系列高图。我的要求是将“日期”作为 X 轴，将“MsgType”作为名称，将“计数”作为数据。当我需要为 MsgTypes 计数时，我有两个对象。但首先我需要根据日期对数据进行分组，然后需要将每个 MsgType 与计数放在堆栈中。请帮助我，因为我无法弄清楚任何事情。任何帮助将不胜感激。我已经为其他场景实施了以下操作：-

Highcharts.chart('MP_Chart', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Market Processes',
                style: { "fontSize": "16px", "font-weight": "bold" }
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: Date,
                labels: {
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Queued messages',
                    style: {
                        fontWeight: 'bold'
                    }
                },
                stackLabels: {
                    enabled: false,
                    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,
                itemStyle: {
                    fontSize: '12px',
                    font: '12pt',
                }
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                name: 'Queued',
                data: JSON.parse("[" + QueuedMPCount + "]")
            }, {
                name: 'Polled',
                data: JSON.parse("[" + PolledMPCount + "]")
            }]
        });
4

1 回答 1

2

假设我正确理解了您的问题，您需要先对数据进行一些预处理，然后再将其传递给 Highcharts，例如，如下所示：

var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];
json = json.reverse() //reverse incomming json because highcharts expectes sorted dates
var series = [];
var names = [];
for (let i = 0; i < json.length; i++) { //loop through all incoming records
  if (names.indexOf(json[i].MsgType) !== -1) { //check if we have a record with this messageType yet, if yes, add to that messagetypes array
    series[names.indexOf(json[i].MsgType)].data.push({
      x: new Date(json[i].date),
      y: json[i].count
    })
  } else { //add new messageTypes
    names.push(json[i].MsgType)
    series.push({
      name: json[i].MsgType,
      data: [{
        x: new Date(json[i].date),
        y: json[i].count
      }]
    })
  }
}

再加上这一点，我将 xAxis 类型更改为 datetime 和 series 定义以获取我们之前创建的变量：

xAxis: {
  type: 'datetime',
  ...
},
series: series

然后我们得到这个：

var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];
json = json.reverse()
var series = [];
var names = [];
for (let i = 0; i < json.length; i++) {
  if (names.indexOf(json[i].MsgType) !== -1) {
    series[names.indexOf(json[i].MsgType)].data.push({
      x: new Date(json[i].date),
      y: json[i].count
    })
  } else {
    names.push(json[i].MsgType)
    series.push({
      name: json[i].MsgType,
      data: [{
        x: new Date(json[i].date),
        y: json[i].count
      }]
    })
  }
}

Highcharts.chart('MP_Chart', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Market Processes',
    style: {
      "fontSize": "16px",
      "font-weight": "bold"
    }
  },
  credits: {
    enabled: false
  },
  xAxis: {
    type: 'datetime',
    labels: {
      style: {
        fontWeight: 'bold'
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total Queued messages',
      style: {
        fontWeight: 'bold'
      }
    },
    stackLabels: {
      enabled: false,
      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,
    itemStyle: {
      fontSize: '12px',
      font: '12pt',
    }
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: series
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="MP_Chart"></div>

JSfiddle 工作示例： https ://jsfiddle.net/ewolden/Lbyq4k0n/19/

于 2018-06-14T14:20:26.503 回答