Есть ли ограничение на размер серии Highcharts? - PullRequest
Новая
       13

Есть ли ограничение на размер серии Highcharts?

1 голос
/ 03 апреля 2019

Я использую диаграмму Санки, чтобы представить некоторые данные, и наткнулся на проблему сегодня.

В приведенном ниже примере кода используются два набора данных: dataJSONfull, который отображается неправильно, и подмножество dataJSON (первые два элемента dataJSONfull), которое работает.

Всекод также доступен на JSFiddle .

Первый случай (dataJSON) в порядке: 

let dataJSONfull = JSON.parse('[["10.10.90.3","10.10.81.36",5],["10.35.12.8","10.35.24.33",5],["10.40.1.254","10.40.8.151",4],["10.89.7.117","10.89.3.109",4],["10.40.0.126","10.40.8.151",4],["10.6.94.77","10.10.86.5",4],["10.81.102.133","10.10.77.21",3],["10.81.102.133","10.10.86.32",3],["10.81.102.133","10.20.3.91",3],["10.81.102.133","10.85.75.250",3],["10.81.102.133","10.91.114.78",2],["10.10.66.1","10.10.82.0",3],["10.40.15.254","10.40.8.151",2],["10.40.8.175","10.120.0.150",2],["10.40.8.175","10.40.1.15",2],["10.40.8.175","10.40.8.151",2],["10.24.137.61","10.10.77.21",2],["10.24.137.61","10.10.85.1",2],["10.10.68.56","10.10.68.56",2],["10.10.84.3","10.10.86.5",2],["10.10.84.3","10.10.85.1",1],["10.10.86.5","10.10.86.5",2],["10.20.3.91","10.20.3.91",2],["172.16.15.150","172.16.15.150",2],["10.120.0.254","10.40.8.151",1],["10.2.0.1","10.2.0.71",1],["10.40.8.151","10.40.8.151",1],["10.81.99.19","10.91.114.78",1]]')
let dataJSON = JSON.parse('[["10.10.90.3","10.10.81.36",5],["10.35.12.8","10.35.24.33",5]]')
//console.log(dataJSONfull, dataJSON)
Highcharts.chart('container', {

  title: {
    text: 'Highcharts Sankey Diagram'
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    data: dataJSON,
    type: 'sankey',
    name: 'Sankey demo series'
  }]

});
#container {
  min-width: 300px;
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
  border: 1px solid silver;
}

#csv {
  display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Случай 2 (dataJSONfull) прерывается с ошибкой консоли: 

VM141 sankey.js:22 Uncaught TypeError: Cannot read property 'options' of undefined
    at q.<anonymous> (VM141 sankey.js:22)
    at Array.forEach (<anonymous>)
    at q.createNodeColumns (VM141 sankey.js:21)
    at q.translate (VM141 sankey.js:28)
    at VM140 highcharts.js:289
    at Array.forEach (<anonymous>)
    at a.Chart.renderSeries (VM140 highcharts.js:289)
    at a.Chart.render (VM140 highcharts.js:291)
    at a.Chart.firstRender (VM140 highcharts.js:294)
    at a.Chart.<anonymous> (VM140 highcharts.js:268)


let dataJSONfull = JSON.parse('[["10.10.90.3","10.10.81.36",5],["10.35.12.8","10.35.24.33",5],["10.40.1.254","10.40.8.151",4],["10.89.7.117","10.89.3.109",4],["10.40.0.126","10.40.8.151",4],["10.6.94.77","10.10.86.5",4],["10.81.102.133","10.10.77.21",3],["10.81.102.133","10.10.86.32",3],["10.81.102.133","10.20.3.91",3],["10.81.102.133","10.85.75.250",3],["10.81.102.133","10.91.114.78",2],["10.10.66.1","10.10.82.0",3],["10.40.15.254","10.40.8.151",2],["10.40.8.175","10.120.0.150",2],["10.40.8.175","10.40.1.15",2],["10.40.8.175","10.40.8.151",2],["10.24.137.61","10.10.77.21",2],["10.24.137.61","10.10.85.1",2],["10.10.68.56","10.10.68.56",2],["10.10.84.3","10.10.86.5",2],["10.10.84.3","10.10.85.1",1],["10.10.86.5","10.10.86.5",2],["10.20.3.91","10.20.3.91",2],["172.16.15.150","172.16.15.150",2],["10.120.0.254","10.40.8.151",1],["10.2.0.1","10.2.0.71",1],["10.40.8.151","10.40.8.151",1],["10.81.99.19","10.91.114.78",1]]')
let dataJSON = JSON.parse('[["10.10.90.3","10.10.81.36",5],["10.35.12.8","10.35.24.33",5]]')
//console.log(dataJSONfull, dataJSON)
Highcharts.chart('container', {

  title: {
    text: 'Highcharts Sankey Diagram'
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    data: dataJSONfull,
    type: 'sankey',
    name: 'Sankey demo series'
  }]

});
#container {
  min-width: 300px;
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
  border: 1px solid silver;
}

#csv {
  display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Единственное отличие в коде - это установленный размер, но я не верю, что это может быть ошибкой (не говоря уже о том, что код работал вчерас большими наборами).

И dataJSON, и dataJSONfull правильно проанализированы в объекте (поэтому JSON в порядке)

1 Ответ

2 голосов
/ 03 апреля 2019

Ваш больший набор данных не работает, потому что две строки имеют собственные ссылки. Specificially 

["10.10.68.56", "10.10.68.56", 2],
["172.16.15.150", "172.16.15.150", 2],

Точка from и to сами. Если вы удалите их, вы получите рабочий код: 

let dataJSONfull = JSON.parse('[["10.10.90.3","10.10.81.36",5],["10.35.12.8","10.35.24.33",5],["10.40.1.254","10.40.8.151",4],["10.89.7.117","10.89.3.109",4],["10.40.0.126","10.40.8.151",4],["10.6.94.77","10.10.86.5",4],["10.81.102.133","10.10.77.21",3],["10.81.102.133","10.10.86.32",3],["10.81.102.133","10.20.3.91",3],["10.81.102.133","10.85.75.250",3],["10.81.102.133","10.91.114.78",2],["10.10.66.1","10.10.82.0",3],["10.40.15.254","10.40.8.151",2],["10.40.8.175","10.120.0.150",2],["10.40.8.175","10.40.1.15",2],["10.40.8.175","10.40.8.151",2],["10.24.137.61","10.10.77.21",2],["10.24.137.61","10.10.85.1",2],["10.10.84.3","10.10.86.5",2],["10.10.84.3","10.10.85.1",1],["10.10.86.5","10.10.86.5",2],["10.20.3.91","10.20.3.91",2],["10.120.0.254","10.40.8.151",1],["10.2.0.1","10.2.0.71",1],["10.40.8.151","10.40.8.151",1],["10.81.99.19","10.91.114.78",1]]')
let dataJSON = JSON.parse('[["10.10.90.3","10.10.81.36",5],["10.35.12.8","10.35.24.33",5]]')
//console.log(dataJSONfull, dataJSON)
Highcharts.chart('container', {

  title: {
    text: 'Highcharts Sankey Diagram'
  },
  series: [{
    keys: ['from', 'to', 'weight'],
    data: dataJSONfull,
    type: 'sankey',
    name: 'Sankey demo series'
  }]

});
#container {
  min-width: 300px;
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
  border: 1px solid silver;
}

#csv {
  display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

В github команда highcharts заявила, что циклические ссылки на данный момент не поддерживаются: https://github.com/highcharts/highcharts/issues/8218

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...