HighCharts и Javascript для передачи данных как массив

Я пытаюсь передать массив как переменную с Javascript в граф HighCharts. Точки с их маркерами отображаются корректно, но нет сплайна, соединяющего точки (данные 2, фиолетовый). Я попытался на том же графике, чтобы передать массив со значениями, и на этот раз HighCharts отображает маркеры и сплайны (Data 1, Red). Для обеих серий настроены все параметры линии (lineWidth, dashStyle, цвет). Я тестировал его на IE11 и Chrome и FireFox, и результат тот же ... Ниже приведен полный код. Если кто-то уже столкнулся с этим или, лучше!, Есть идея о том, как это решить (у вас есть набор данных, отображаемых с маркерами, и линия, соединяющая эти маркеры), мне было бы очень интересно! Большое спасибо !!HighCharts и Javascript для передачи данных как массив

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Chart</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var myData = new Array(); 
     for (n=1;n<=10;n++) 
     { 
      myData[n]=Math.floor((Math.random() * 10) + 1); 
     } 
    var mySeries = []; 
    for (var i = 0; i < myData.length; i++){ 
     mySeries.push([i,myData[i]]); 
    } 
    $('#container').highcharts({ 
     title: { 
      text: 'Chart', 
      x: -20 //center 
     }, 
     xAxis: { 
      opposite:true, 
      title: {text: 'Horizontal Axis'}, 
      showFirstLabel: true, 
      showLastLabel: true, 
      min: 0, max: 12, 
      tickInterval: 1, 
      startOnTick: true, 
      endOnTick: true, 
     }, 
     yAxis: { 
      title: {text: 'Vertical Axis - inverted'}, 
      reversed: true, 
      showFirstLabel: true, 
      showLastLabel: true, 
      min: 0, max: 12, 
      tickInterval: 1, 
      startOnTick: true, 
      endOnTick: true, 
     }, 
     tooltip: { 
      valueSuffix: 'Week' 
     },  
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [ 
     {name:'Data 1',data:[0,1,2,3,4,5,6,7,8,9,10],marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF0000'}, 
     {name:'Data 2',data:mySeries    ,marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF00FF'}, 
     ] 
    }); 
}); 
</script> 
</head> 
<body> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="width: 1000px; height: 700px; margin: 0 auto"></div> 
</body> 
</html>

источник

2016-06-18 Julien

Я считаю Highcharts молча не в состоянии сделать сплайн, потому что ваше первое значение mySeries является undefined.

С myData вы начинаете в n = 1, так myData[0] еще undefined после запуска через for цикла. Затем вы начинаете с mySeries с i = 0, так что первое неопределенное значение добавляется к mySeries. Если вместо этого вы либо начинаете i = 1, либо меняете свой myDatafor на i = 0, тогда он должен работать.

Другими словами, это сделать:

var myData = new Array(); 
for (var n=0; n<10; n++){ 
    myData[n]=Math.floor((Math.random() * 10) + 1); 
} 
var mySeries = []; 
for (var i = 0; i < myData.length; i++){ 
    mySeries.push([i,myData[i]]); 
}

То есть, я бы конденсироваться ваше поколение данных в одной for петли по соображениям эффективности, которые бы также устранить проблему:

//define an empty array 
var mySeries = []; 

for (var i = 0; i < 10; i++){ 
    //create your value 
    var d = Math.floor((Math.random() * 10) + 1); 
    //push an array into your array 
    mySeries.push([i,d]); 
}

источник

2016-06-19 00:36:27 elliot

Удивительный, Эллиот , спасибо, много работает! Ты спас мне много времени! Очень ценим! – Julien

Рад это услышать. Не могли бы вы нажать кнопку «Принять ответ», пожалуйста;) – elliot

HighCharts и Javascript для передачи данных как массив

ответ

Смежные вопросы