将两年的一个月与Highcharts进行比较

时间:2017-02-22 13:48:39

标签: javascript jquery highcharts

有没有办法将两年的一个月与Highcharts Columns进行比较?

见下面的例子:

enter image description here

数据结构如下:

myData[0] = { data1:"0.00", data2:"0.00", data3:"868.00", month:"june", numMonth:"11", data4:"mydata4", year:"2014" } 
myData[1] = { data1:"0.00", data2:"0.00", data3:"737.00", month:"june", numMonth:"11", data4:"mydata4", year:"2015" }

通过比较这些数据,我想把数年放在我的专栏之下。

谢谢!

1 个答案:

答案 0 :(得分:1)

您可以轻松地将数据转换为highcharts预期的格式。

myData = []
myData[0] = {
  data1: "0.00",
  data2: "0.00",
  data3: "2211.00",
  month: "november",
  numMonth: "11",
  data4: "mydata4",
  year: "2015"
}
myData[1] = {
  data1: "0.00",
  data2: "0.00",
  data3: "2211.00",
  month: "november",
  numMonth: "11",
  data4: "mydata4",
  year: "2016"
}

const series = myData.map((o) => {
  return {
    type: 'column',
    name: o.year,
    data: [{x: Number(o.numMonth), y: Number(o.data3)}]
  }
})

console.log(series)

const options = {
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] },
  series: series
}

const chart = Highcharts.chart('container', options)

实例: https://jsfiddle.net/xw3w1zve/

输出: enter image description here