charts - AmCharts のポイント値の 2 つのシーケンスの違いを見つけますか?

Question

を使用していAmChartsます。バルーン テキストに値を表示する必要があります。その値は値フィールドではありません。

例: X axis Value 0 , Y axis 1, (0,1) is 2 ; (1,2) is 5.

(0,1)値との差を表示する必要があります(1,2)- つまり、「3」をポイントのバルーンとして表示します(1,2)。何か案は ？

Answer 1

はい、スクリーンショットのチャートは実装可能です。

最初に、追加のフィールドをチャート データに追加します (例: ) labelGraph1, labelGraph2。次に、オブジェクトのlabelTextプロパティを使用できます。AmCharts.AmGraph

var chartData = [{
    title: "Apples",
    value1: 24,
    value2: 28,
    labelGraph1: null,
    labelGraph2: null
}, {
    title: "Bananas",
    value1: 27,
    value2: 31,
    labelGraph1: null,
    labelGraph2: null
}, {
    title: "Cherries",
    value1: 27,
    value2: 39,
    labelGraph1: null,
    labelGraph2: null
}];

for(var i = 0; i < chartData.length; i++) {
    chartData[i].labelGraph1 = chartData[i].value1;
    chartData[i].labelGraph2 = chartData[i].value2 - chartData[i].value1;
}

var chart;

AmCharts.ready(function () {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "title";

    // GRAPHS                                            
    var graph1 = new AmCharts.AmGraph();
    graph1.valueField = "value1";
    graph1.type = "line";
    graph1.fillAlphas = 0.6;
    graph1.labelText = "[[labelGraph1]]";
    chart.addGraph(graph1);

    var graph2 = new AmCharts.AmGraph();
    graph2.valueField = "value2";
    graph2.type = "line";
    graph2.fillAlphas = 0.6;
    graph2.labelText = "[[labelGraph2]]";
    chart.addGraph(graph2);

    // WRITE
    chart.write("chartdiv")
});

唯一の難点は、表示されたフィールドの値を計算することです。私はそうしました。データに従ってその関数を変更する必要があります。

for(var i = 0; i < chartData.length; i++) {
    chartData[i].labelGraph1 = chartData[i].value1;
    chartData[i].labelGraph2 = chartData[i].value2 - chartData[i].value1;
}