L'ajout d'une série dynamiquement avec HighCharts Graphiques Boursiers

J'ai le code suivant: http://jsfiddle.net/maniator/vTjW8/

var createChartTemplate = function() {
return {
chart: new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
series: []
}),
addSeries: function(name) {
this.chart.addSeries({
name: name,
data: [],
id: Math.floor(Math.random()*1000)
});
},
addPoint: function(data, series) {
var seriesIndex = this.seriesExists(series);
if (!(seriesIndex === false)) {
this.chart.series[seriesIndex].addPoint(data, false);
}
this.chart.redraw();
},
seriesExists: function(series) {
var seriesIndex = false;
$.each(this.chart.series, function(index, item) {
if ($.trim(item.name) == $.trim(series)) {
seriesIndex = index;
return false;
}
});
return seriesIndex;
}
}
}
$(function() {
var data = usdeur.splice(0, 700);
var chart = createChartTemplate();
chart.addSeries("New Series");
for (var i = 0; i < data.length; i++) {
chart.addPoint(data[i], "New Series");
}
});

Il a l'erreur suivante dans la console:

Uncaught TypeError: Cannot read property 'options' undefined

Ce code fonctionne très bien si elle est normale highchart, mais pour quelque raison il ne fonctionne pas avec un HighStock graphique.

Comment puis-je faire en sorte qu'il fonctionne avec le type de graphique que j'ai besoin?

Mise à jour:

Je découvre une sorte de chemin autour de l'obtention de la 1ère série de manière dynamique, mais lorsque j'essaie d'ajouter une deuxième série a une erreur de:

Uncaught TypeError: Cannot read property 'piles' undefined

Violon: http://jsfiddle.net/maniator/V5WAJ/

  • vous n'avez donc jamais comprendre comment démarrer un highstock avec des données vides? Je suis confronté problème similaire, c'est à dire le besoin d'ajouter des données dynamiquement le tableau après le graphique a été créé.
  • J'avais besoin de futz avec le code.... :-\ très très hacky. En gros quand j'avais besoin d'une nouvelle série, j'ai recréé l'ensemble du graphique à nouveau avec de nouvelles séries de données.....
  • J'ai trouvé une solution pour mes besoins. Ne sais pas si cela s'applique à votre problème (et il est probablement trop tard), mais j'ai posté une réponse ci-dessous pour les autres.
InformationsquelleAutor Neal | 2011-10-06
  1. 7

    Vous êtes à la création du graphique avec un vide de la série, d'où l'erreur. Lorsque cette ligne de code s'exécute, c'est l'initialisation de la Highchart immédiatement, avant que l' series option a été définie.

    var chart = createChartTemplate();

    J'ai eu une meilleure expérience avec Highcharts quand j'ai construit la matrice de stockage de série abord, puis l'ajouter dans les options du constructeur dans la dernière étape.

    Spécifiques à votre exemple, l' usdeur.js fichier comprend déjà une initialisation de tableau de données. Vous avez simplement besoin de passer dans le tableau d'options. Votre jsfiddle peut être simplifiée à cette.

    $(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
series: [{
name: 'New Series',
data: usdeur
}]
});
});
    • Je veux commencer avec un vide de la série. Je veux dynamiquement ajouter de la série... régulièrement HighCharts il fonctionne parfaitement...
    • Voici une mise à jour du violon, où je fais 2 séries: jsfiddle.net/maniator/vTjW8/9
    • La stock exemple condition dans la doc pour l'ajout d'une série montre le graphique étant initialisé avec une série, puis le 2ème est ajouté après l'initialisation. Peut-être qu'il ne peut pas être initialisée avec un ensemble vide?
    • le régulier Highcharts graphique peut être démarré avec le vide serieses pourquoi ne devrais pas le highstock un pouvoir aussi?
    • Depuis highcharts api 1.2.0 existe une série[i].méthode setData (). api.highcharts.com/highcharts#Series.setData
    • merci de m'aider stackoverflow.com/questions/43623840/...

    InformationsquelleAutor bejonbee
  2. 2

    J'ai trouvé une solution de contournement. Mon cas d'utilisation était de tracer les valeurs au fil du temps, de sorte que la première valeur que j'étais en ajoutant le tableau a été une paire de horodatage valide avec un null pour les données:

    series : [{
name : 'Random data',
data : (function() {
var data = [], time = (new Date()).getTime();
data.push([time, null]);                
return data;
})()
}]

    Alors à chaque fois que de nouvelles valeurs ont dû être tracée juste d'ajouter simplement comme:

    var value = rawData['My Data Set']
var plot  = [new Date().getTime(), value]
mychart.series[0].addPoint(plot, true, false)

    Cela peut être testé ici, il suffit de remplacer la définition d'origine de la series avec l'un de ici.

    InformationsquelleAutor unexplored
  3. 2

    De la HighStock de Référence de l'API sur addSeries:

    Dans un StockChart avec le navigateur activé, la base de la série ne peuvent pas être ajoutés dynamiquement.

    C'est-à-dire, si vous utilisez le Navigateur, vous devez commencer avec au moins un de la série. Selon la même Référence de l'API, le Navigateur affiche par défaut.

    • Cette secoué m'en trouver un problème que j'ai (j'avais mal compris l' [manque de] la hiérarchie de l' options et, partant, n'était pas de l'initialisation de la series
    InformationsquelleAutor kcvikander
  4. 0

    J'ai trouvé que vous pouvez utiliser le code suivant dans l'dynamiquement en fonction appelée pour contourner la highstock option.série[0] = null problème

    options.series= [{data:[]}];
//you can now add the dynamic data, eg
options.series[0].data.push([time, val]);
    InformationsquelleAutor ejectamenta
  5. 0

    J'ai atteint l'ajout de temps de la série de façon dynamique comme suit:

    la partie HTML, rien de compliqué, c'est ici:

    <script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

    et la partie javascript:

      $(function () {
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: 'Values'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
name: 'A',
color: "#ea825f",
data: []
//
},{
name: 'B',
color: "#2a82ff",
data: []
//data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
var data1 = [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
var data2 = [4.0, 11.9, 6.5, 12.5, 11.4, 15.5, 29.2, 24.5, 21.3, 15.3, 14.9, 8.6]
function add_timeseries(data, chart, series_index) {
$.map(data, function(i){
chart.series[series_index].addPoint(i, true, false)
})
}
add_timeseries(data1, chart, 0)
add_timeseries(data2, chart, 1)
});

    add_timeseries() fonction fait le travail réel, il remplit la série dans la fente de données

    https://jsfiddle.net/muatik2/vxym5xx5/6/

    InformationsquelleAutor Muatik
  6. 0

    Vous pouvez créer le modèle de première et ajouter la série plus tard. Mais une fois que vous avez ajouté au moins une série, vous ne pouvez pas supprimer le highcharts-navigator-series(auto-générée) à partir d'un HighStock graphique. Si vous souhaitez supprimer toutes les séries, vous pouvez utiliser le code ci-dessous:

    while (chart.series.length > 0) {
if (chart.series[0].options.id == 'highcharts-navigator-series') {
break;
}
chart.series[0].remove(true);
}

    Cela permettra d'éliminer toutes les séries sauf le navigateur de la série. Vous pouvez ensuite la possibilité d'ajouter de nouvelles séries à votre graphique.

    InformationsquelleAutor backslashN