Combinaison de diagrammes en colonnes et de graphiques en courbes avec les mêmes données dans le même conteneur (Graphiques)

Question

Je souhaite créer un graphique combiné avec un histogramme avec plusieurs séries et un graphique en courbes. Le problème est que j'obtiens des données de cartes élevées à partir de la réponse JSON imbriquée. Pour cela j'ai initialisé le tableau et ce tableau donne en série dans les graphes de plotoptions comme vous pouvez le voir dans le code ci-dessous.

Mon code est comme ceci:

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 

}); 

C'est la colonne tableau que je reçois quand j'écris colonne de type de graphique.

Ceci est mon graphique linéaire que je reçois lorsque j'ai changé de colonne de type pour spliner dans le graphique dans les graphiques.

Et voici mes données JSON (données de 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 
      } 
     ] 
     } 
    } 
    ] 
} 

Je veux combiner les deux dans le même récipient avec un même problème de données.Système est dans la façon de dire Highcharts plusieurs séries doivent être représentées avec une ligne et avec un type de colonne avec les mêmes données.Pour cela, lorsque j'écris series: [{data: crime_data, tapez: spline}] au lieu de series: crime_data Dans ce cas, je ne reçois pas de données Highcharts. Quelqu'un peut-il s'il vous plaît aidez-moi comment dois-je faire cela.S'il vous plaît me suggérer.

Answer 1

Transmettez vos données, comme ci-dessous. ajouter un type de graphique dans chaque série de données; Ici j'ai remplacé la valeur de type mais avec les mêmes données.

[{ 
     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] 
    },] 

Voici fiddle pour plus de détails.

Answer 2

Voici un exemple complet utilisant vos données.

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) 

Un exemple concret: https://jsfiddle.net/Lo323gq3/

sortie ci-dessous: