将柱状图和折线图与同一个容器中的相同数据相结合（Highcharts）

我想用多个系列和折线图的柱状图构建组合图表。问题是我从嵌套的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 

});

这是柱形图当我写的图表类型列我得到。

这是我的折线图我得到的时候，我改变了类型的列到图表中的样条在highcharts。

这是我的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 
      } 
     ] 
     } 
    } 
    ] 
}

我想他们都在同一data.The问题同一个容器相结合是如何告诉highcharts多个系列应该用行和列类型表示为相同的数据。为此，当我编写系列时：[{data：crime_data，type：spline}]而不是系列：crime_data在这种情况下，我没有收到Highcharts数据。任何人都可以请帮助我，我应该怎么做，请告诉我。

来源

2017-02-22 Manisha Monga

附加类型，详见本http://www.highcharts.com/docs/chart - 和 - 系列类型/合并图表类型 – Thangadurai

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

[{ 
     type: 'line', 
     name: 'AssaultCrimeTheme', 
     data: [3, 2, 1, 3, 4] 
    }, { 
     type: 'line', 
     name: 'BurglaryCrimeTheme', 
     data: [2, 3, 5, 7, 6] 
    }, { 
     type: 'column', 
     name: 'AssaultCrimeTheme', 
     data: [3, 2, 1, 3, 4] 
    }, { 
     type: 'column', 
     name: 'BurglaryCrimeTheme', 
     data: [2, 3, 5, 7, 6] 
    },]

这里是fiddle了解更多详情。

来源

2017-02-22 08:04:54 Thangadurai

这是问题，我应该如何传递这种格式的数据，因为我的JSON嵌套JSON。请建议我。我想要柱状图和折线图（趋势线）。 –

你提到过，使用嵌套JSON的系列数据创建数组。因此，您可以使用该数组，然后使用不同的类型值再次将同一对象再次推入两次。你能发布你的** crime_data **数组值吗？ – Thangadurai

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

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/

输出：在各数组值

来源

2017-02-22 17:09:48 stpoa

将柱状图和折线图与同一个容器中的相同数据相结合（Highcharts）

回答

相关问题