Highcharts | Mehrere Y-Achsen-Skalen erstellen

Ich versuche, dieses Diagramm mit mehreren Y-Achsen zu versehen, die alle unterschiedliche Werte und Tick-Intervalle haben. Wie Signalstärke auf einer Skala von 0% -100%, Temperatur 0F-100F und Main Power von 0V bis 25V, aber kann nicht scheinen, es herauszufinden. Hier ist mein jFiddle: http://jsfiddle.net/0k5k8ygz/Highcharts | Mehrere Y-Achsen-Skalen erstellen

Code:

function createChart() { 

Highcharts.stockChart('container', { 

    rangeSelector: { 
     selected: 4 
    }, 

    yAxis: [{ // Primary yAxis 
    labels: { 
     format: '{value}°F', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    title: { 
     text: 'Temperature', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    opposite: true 

}, { // Secondary yAxis 
    gridLineWidth: 0, 
    title: { 
     text: 'Main Power', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    labels: { 
     format: '{value} volts', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    } 

}, { // Tertiary yAxis 
    gridLineWidth: 0, 
    title: { 
     text: 'Signal Strength', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    labels: { 
     format: '{value} %', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    opposite: true 
}], 




    plotOptions: { 
     series: { 
      compare: 'percent', 
      showInNavigator: true 
     } 
    }, 

    tooltip: { 
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
     valueDecimals: 2, 
     split: true 
    }, 

    series: seriesOptions 
}); 

$.each(names, function (i, name) { 

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) { 

    seriesOptions[i] = { 
     name: name, 
     data: data 
    }; 

    // As we're loading the data asynchronously, we don't know what order it will arrive. So 
    // we keep a counter and create the chart when all the data is loaded. 
    seriesCounter += 1; 

    if (seriesCounter === names.length) { 
     createChart(); 
    } 
}); 
});

Quelle

2017-05-30 J. Doe43

Also was ist die eigentliche Frage (spezifisch sein)? – jlbriggs

Entschuldigung, ich kann nicht herausfinden, wie man allen 3 Y-Achsen-Skalen numerische Werte hinzufügt. Auf der rechten Seite des Diagramms sind Main Power und Signal Strength beide leer. Wie würde ich dafür sorgen, dass sie numerische Werte haben? Hauptstrom wird auf einer Skala von 0 bis 24, Signalstärke auf einer Skala von 0% bis 100% –

Wenn Sie einige Daten zu jedem der y-Achse hinzuzufügen, werden sie Markierungen automatisch erhalten kreuzen. Sie ordnen Daten zu einem bestimmten y-Achse mit dem series.yAxis Index:

seriesOptions[i] = { 
    name: name, 
    data: data, 
    yAxis: i, 
};

Wenn Sie auch einen gültigen Bereich für die y-Achsen angeben möchten, können Sie min und max auf jeder einzelnen Achse einstellen:

... 
labels: { 
    format: '{value} volts', 
}, 
min: 0, 
max: 25, 
...

http://jsfiddle.net/0k5k8ygz/5/

Quelle

2017-05-30 20:50:24 Sphinxxx

Dank Sphinxxx! Das hat meine Frage beantwortet! –

Highcharts | Mehrere Y-Achsen-Skalen erstellen

Antwort

Verwandte Themen