チャートがロードされた後、javascriptで変数を更新します-amcharts

debugcn 投稿 Dev

EZDC

選択メニューを使用して、いくつかのJSON配列のデータを更新する必要があります。

アイデアは次のとおりです。グローバル変数（JSON配列）をその年に関連付けられたデータで更新する年を選択します。

私の問題は、可変スコープとこれを制御する方法がわからないことです。また、amchartsがオンロードでチャートを作成するため、変数を更新しても何も起こらないこともわかりました。

グローバル変数を新しいデータセットで更新してから、チャートに新しいデータを再読み込みすることはできますか？これはどのように見えますか？

このアップデートが役立つかどうか、またはこれがさらに明確かどうかはわかりません。

これは私が作成したチャートの1つのフィドルへのリンクです：

http://jsfiddle.net/kenaesthetic/33JH9/

省略形の構造は次のようになります。

<head>
<script> amchart script </script>  
<head>

<body>

<select>
<option>2010</option
<option>2011</option
<option>2012</option
<option>2013</option
<option>2014</option
</select>

<div id="chart-container-1"></div> // These charts are stacked (refer to the fiddle)
<div id="chart-container-2"></div>
<div id="chart-container-3"></div>
<div id="chart-container-4"></div>
<div id="chart-container-5"></div>

</body>

スティーブウィルヘルム

私はあなたがこのような何かをしたいと思います：

var chart;

var chartData = [
    {
        "subject": "Personal Services",
        "2010": 493142064,
        "2011": 540156996,
        "2012": 593541335,
        "2013": 640585618,
        "2014": 689417065
    }
];

AmCharts.ready(function () {
    // SERIALL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "subject";
    chart.plotAreaBorderAlpha = 0.2;
    chart.rotate = true;

    // AXES
    // Category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0.1;
    categoryAxis.axisAlpha = 0;
    categoryAxis.gridPosition = "start";

    // value                      
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "regular";
    valueAxis.gridAlpha = 0.1;
    valueAxis.axisAlpha = 0;
    chart.addValueAxis(valueAxis);

    // GRAPHS
    // firstgraph 
    var graph = new AmCharts.AmGraph();
    graph.title = "2010";
    graph.labelText = "[[value]]";
    graph.valueField = "2010";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#C72C95";
    graph.balloonText = "<b><span style='color:#C72C95'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
    chart.addGraph(graph);

    // second graph                              
    graph = new AmCharts.AmGraph();
    graph.title = "2011";
    graph.labelText = "[[value]]";
    graph.valueField = "2011";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#D8E0BD";
    graph.balloonText = "<b><span style='color:#afbb86'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
    chart.addGraph(graph);

    // third graph              
    graph = new AmCharts.AmGraph();
    graph.title = "2012";
    graph.labelText = "[[value]]";
    graph.valueField = "2012";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#B3DBD4";
    graph.balloonText = "<b><span style='color:#74bdb0'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
    chart.addGraph(graph);

    // fourth graph 
    graph = new AmCharts.AmGraph();
    graph.title = "2013";
    graph.labelText = "[[value]]";
    graph.valueField = "2013";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#69A55C";
    graph.balloonText = "<b><span style='color:#69A55C'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
    chart.addGraph(graph);

    // fifth graph 
    graph = new AmCharts.AmGraph();
    graph.title = "2014";
    graph.labelText = "[[value]]";
    graph.valueField = "2014";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#B5B8D3";
    graph.balloonText = "<b><span style='color:#7a81be'>[[title]]</b></span><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
    chart.addGraph(graph);

    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.position = "right";
    legend.borderAlpha = 0.3;
    legend.horizontalGap = 10;
    legend.switchType = "v";
    chart.addLegend(legend);

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

// Make chart 2D/3D
function setDepth() {
    if (document.getElementById("rb1").checked) {
        chart.depth3D = 0;
        chart.angle = 0;
    } else {
        chart.depth3D = 20;
        chart.angle = 30;
    }
    chart.validateNow();
}

この例は、AmChartの積み上げグラフのサンプルコードに基づいています。チャートのデータをグローバルJavascript変数、つまりchartDataに分離します。

問題を2つの部分に分解する必要があります。データの操作と、変更後にデータをグラフにロードすることです。

これは、jQueryとボタンを使用してデータを操作する非常に簡単な例です。http://jsfiddle.net/stevewilhelm/XzmQ6/2/

データが変更されたら、グラフを更新する必要があります。例として、http：//blog.amcharts.com/2013/08/tutorial-live-editing-chart-data.htmlを参照してください。

詳細については、chart.dataProvider chart.validateData（）を参照してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]