Question

我想构建一个带有多个系列和折线图的柱形图的组合图表。问题是我从嵌套的JSON响应中获取高图表数据。为此我初始化了数组，并且该数组在plotoptions highcharts中以串联形式给出，如下面的代码所示。

我的代码是这样的：

var crime_data=[];
                   for(var i=0;i<result.themes.length;i++){
                          var crime={};
                          var test2 = result.themes[i];
                          var test = test2[Object.keys(test2)];
                         crime.name = Object.keys(result.themes[i]);
                         crime.data = [];
                           for(var k=0;k<test.yearTheme.length;k++){
                               var test3=test.yearTheme[k];
                              var test5=test3.individualValueVariable;
                               for(var j=0;j<test5.length;j++){
                                crime.data.push(test5[j].count);
                          };
                        };
                         crime_data.push(crime);
                             };

    var crimeChart = new Highcharts.Chart({
    chart: {
     renderTo: 'container1',
     type:'column'
    },
    title: {
        text: 'Crime'
    },
    xAxis: {
        categories: month,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count'
        }
    },
        credits: {
            enabled: false
    }, 
    tooltip: {

        shared: true,
    },
    plotOptions: {

        column: {
            pointPadding: 0.2,
            borderWidth: 0,

            depth: 25,
             allowPointSelect: true,
             cursor: 'pointer',
             point: {

              },

        }
    },
 series: crime_data

});

这是我在编写图表类型列时得到的柱形图。

这是我的线图，当我将类型列更改为高图中的图表样条线时，我得到了。

这是我的JSON数据（Highcharts数据）：

{
  "boundaries": {
    "boundary": [
      {
        "boundaryId": "55083021003",
        "boundaryType": "USA_CITY",
        "boundaryRef": "C1"
      }
    ]
  },
  "themes": [
    {
      "AssaultCrimeTheme": {
        "boundaryRef": "C1",
        "individualValueVariable": [
          {
            "name": "2013 Assault Crime",
            "description": "Assault Crime for 2013",
            "count": 18901
          },
          {
            "name": "2014 Assault Crime",
            "description": "Assault Crime for 2014",
            "count": 17707
          }
        ]
      }
    },
    {
      "BurglaryCrimeTheme": {
        "boundaryRef": "C1",
        "individualValueVariable": [
          {
            "name": "2013 Burglary Crime",
            "description": "Burglary Crime for 2013",
            "count": 17743
          },
          {
            "name": "2014 Burglary Crime",
            "description": "Burglary Crime for 2014",
            "count": 14242
          }
        ]
      }
    }
  ]
}

我想在同一容器中将它们组合在一起，具有相同的数据。问题在于如何告诉highcharts多个系列应该用line表示，列类型用相同的数据表示。当我写这个系列时：[{ data：crime_data，type：spline}]而不是series：crime_data在这种情况下，我没有得到Highcharts数据。任何人都可以帮我，我该怎么做。请建议我。

Answer 1

传递您的数据，如下格式。在每个数据系列中添加图表类型; 在这里，我替换了类型值，但使用相同的数据。

DYLD_LIBARY_PATH

以下是fiddle了解详情。

Answer 2

以下是使用您的数据的完整示例。

const json = {
  "boundaries": {
    "boundary": [{
      "boundaryId": "55083021003",
      "boundaryType": "USA_CITY",
      "boundaryRef": "C1"
    }]
  },
  "themes": [{
    "AssaultCrimeTheme": {
      "boundaryRef": "C1",
      "individualValueVariable": [{
        "name": "2013 Assault Crime",
        "description": "Assault Crime for 2013",
        "count": 18901
      }, {
        "name": "2014 Assault Crime",
        "description": "Assault Crime for 2014",
        "count": 17707
      }]
    }
  }, {
    "BurglaryCrimeTheme": {
      "boundaryRef": "C1",
      "individualValueVariable": [{
        "name": "2013 Burglary Crime",
        "description": "Burglary Crime for 2013",
        "count": 17743
      }, {
        "name": "2014 Burglary Crime",
        "description": "Burglary Crime for 2014",
        "count": 14242
      }]
    }
  }]
}

// Create categories object in order filter duplicates
const cats = {}
const series = json.themes.map((o) => {
  const key = Object.keys(o)[0]
  return {
    name: key,
    data: o[key].individualValueVariable.map((o) => {
      cats[o.name] = 1
      return { category: o.name, y: o.count }
    })
  }
})

// Convert categories object to array
const categories = Object.keys(cats)

// Chart options
const options = {
  chart: {type: 'column'},
  xAxis: {categories: categories},
  series: series
}

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

console.log(series, categories)

实例：https://jsfiddle.net/Lo323gq3/

以下输出：

将柱形图和折线图与同一容器中相同的相同数据组合在一起（Highcharts）

2 个答案: