2016-08-01 8 views
5

Ich benutze Highcharts, aber meine Frage ist im Allgemeinen. Ich möchte wissen, welches Diagramm eine perfekte Übereinstimmung ist, um die Änderung der Werte zwischen zwei Daten anzuzeigen.Welchen Diagrammtyp sollte ich wählen, um die Änderung der Werte zwischen zwei Daten anzuzeigen?

Z. B Der Kreditzins beispiel 29-Aug: 21,2 30-Aug: 21,3

Die Veränderung liegt bei 0,1 Millionen Euro.

Welchen Diagrammtyp sollte ich wählen, um diesen kleinen Unterschied deutlich sichtbar zu machen?

+0

Sie möchten also große Werte und kleine Werte auf dem gleichen Diagramm zeigen? Sie können in diesem Fall mehrere y-Achsen verwenden. Schauen Sie sich dieses Beispiel an: http://www.highcharts.com/stock/demo/candlestick-and-volume –

+0

Ich möchte nur 2 Werte vervollständigen und den Unterschied auf eine visuelle Weise zeigen. wie, Wert von heute vs Wert von gestern. Also werde ich in jedem Fall 2 Werte und den Unterschied haben. Ich denke nicht, dass Leuchter eine gute Übereinstimmung für meine Anforderung ist. Danke für die Antwort. Irgendeine andere Idee? – ZEE

+0

Ich hätte nie gedacht, Kerzenhalter wäre eine gute Idee, ich wollte Ihnen nur ein Beispiel für Diagramm mit zwei y-Achsen zeigen. –

Antwort

2

Ein einfaches Balkendiagramm mit Datenbeschriftungen zur Angabe der entsprechenden Werte würde den Benutzern zeigen, dass es eine sehr kleine Wertänderung gibt.

Siehe Code-Schnipsel unten. Ich habe eines der grundlegenden Highcharts-Demos für ein Balkendiagramm mit Ihren Beispielwerten modifiziert.

Ich hoffe, das ist hilfreich für Sie!

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { type: 'bar' }, 
 
     title: { text: 'Sample Chart' }, 
 
     xAxis: { 
 
      categories: ['29-Aug','30-Aug'], 
 
      title: { text: null } 
 
     }, 
 
     yAxis: { min: 0 }, 
 
     tooltip: { valueSuffix: ' million' }, 
 
     plotOptions: { 
 
      bar: { 
 
       dataLabels: { 
 
        crop: false, 
 
        overflow: 'none', 
 
        enabled: true, 
 
        style: { fontSize: '18px' } 
 
       } 
 
      } 
 
     }, 
 
     legend: { enabled: false }, 
 
     credits: { enabled: false }, 
 
     series: [{ 
 
      name: 'Sample Series', 
 
      data: [21.2,21.3] 
 
     }] 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>

6

Wenn Sie vergleichen zwei Daten/Werte, würde ich empfehlen, ein bar chart verwenden. (Wenn Sie Werte über Monate oder Jahre hinweg vergleichen, würde ich Ihnen die Verwendung eines Diagramms line oder area empfehlen.) Sie können den Unterschied zwischen den beiden Kreditzinswerten besser durch specifying the minimum, maximum, and step scale values hervorheben, so dass der Unterschied von 0,1 Millionen klar dargestellt werden kann. Siehe unten stehende Demo:

var myConfig = { 
 
    type: 'bar', 
 
    title: { 
 
    text: 'Lending Rate', 
 
    fontFamily: 'Georgia' 
 
    }, 
 
    utc: true, 
 
    timezone: 0, 
 
    scaleX: { 
 
    transform: { 
 
     type: 'date', 
 
     all: '%M %d, %Y' 
 
    }, 
 
    step: 86400000, 
 
    item: { 
 
     fontSize: 10 
 
    } 
 
    }, 
 
    scaleY: { 
 
    values: '21.1:21.4:0.1', 
 
    format: '%vM', 
 
    decimals: 1, 
 
    item: { 
 
     fontSize: 10 
 
    }, 
 
    guide: { 
 
     lineStyle: 'dotted' 
 
    } 
 
    }, 
 
    plot: { 
 
    barWidth: '50%', 
 
    borderWidth: 1, 
 
    borderColor: 'gray', 
 
    backgroundColor: '#99ccff', 
 
    valueBox: { 
 
     text: '%v million', 
 
     fontSize: 12, 
 
     fontColor: 'gray', 
 
     fontWeight: 'normal' 
 
    }, 
 
    tooltip: { 
 
     text: '%v million' 
 
    } 
 
    }, 
 
    series: [ 
 
    { 
 
     values: [ 
 
     [1472428800000, 21.2], 
 
     [1472515200000, 21.3], 
 
     ] 
 
    } 
 
    ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 

 
<div id='myChart'></div>

Weitere auf der Skala Anpassung und Formatierung finden Sie in diesem X/Y-Axis Scales Tutorial. Die value boxes und tooltips können auch verwendet werden, um weitere Informationen zu den Knotenwerten bereitzustellen.

Hoffe, dass hilft. Ich bin Mitglied des ZingChart Teams und freue mich auf weitere Fragen.