Сочетание диаграмм столбцов и линейных диаграмм с одинаковыми данными в одном контейнере (Highcharts)

Question

Я хочу построить комбинированную диаграмму с диаграммой столбцов с несколькими рядами и линейной диаграммой. Проблема в том, что я получаю данные High Chart из вложенного ответа JSON. Для этого я инициализировал массив, и этот массив последовательно выводит на экранные диаграммы, как вы можете видеть в приведенном ниже коде.

Мой код выглядит так:

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 
      } 
     ] 
     } 
    } 
    ] 
} 

Я хочу, чтобы объединить оба в одном контейнере с той же проблемой data.The в том, как сказать Highcharts несколько серий должны быть представлены строкой и с типом столбца с одинаковыми данными. Для этого, когда я пишу серии: [{data: crime_data, type: spline}] вместо ряда: crime_data В этом случае я не получаю данные Highcharts. Может ли кто-нибудь помочь мне, как я должен это делать. Пожалуйста, предложите мне.

Answer 1

Передайте свои данные, как показано ниже. добавить тип диаграммы в каждой серии данных; Здесь я заменил значение типа, но с теми же данными.

[{ 
     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 для более подробной информации.

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/

Выход ниже: