javascript - 将常规 amChart 设置存储为变量并在函数中重复使用它

Question

我有很多函数可以填充 amChart为我。很多amChart不同功能的设置将保持相同。我的功能之一如下:

function updateIndicatorsAllScores() {

    organization = $("#organization").val();
    indicator = $("#indicators").val();
    funcid = "fill_chart_all_scores";

    //console.log('changed'); 
    $.getJSON('functions/getfunctions.php', {
        "organization":organization,
        "indicator":indicator,
        "funcid":funcid},

    function(dataChart) {

            var chart = AmCharts.makeChart("chartallscores", {
            "theme": "light",
            "type": "serial",
            "startDuration": 1,
            "dataProvider": dataChart,
            "rotate": false,
            "categoryField": "organisatie",
              "valueAxes": [ {
                "gridColor": "#FFFFF",
                "gridAlpha": 0.2,
                "dashLength": 0
              } ],
              "gridAboveGraphs": true,
              "startDuration": 1,
              "graphs": [ {
                "balloonText": "[[category]]: <b>[[value]]</b>",
                "fillColorsField": "fillcolor", //Dit veld heb ik meegegeven vanuit SQL functie en bevat de HEX kleurcodes BD
                "fillAlphas": 0.8,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "score"
              } ],
              "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
              },
              "categoryAxis": {
                "gridPosition": "start",
                "gridAlpha": 0,
                "tickPosition": "start",
                "tickLength": 20
              },
              "export": {
                "enabled": true
              }

        },0);

    $('.chart-input').off().on('input change',function() {
        var property = jQuery(this).data('property');
        var target = chart;
        chart.startDuration = 0;

        });
    });
}

我想要的是存储 var = AmCharts.makechart所有图表属性一次并且在函数内仅更改 "dataPRovider: dataChart, .

Answer 1

var dataProvider2 = [ {
    "country": "USA",
    "visits": 1000
  }, {
    "country": "China",
    "visits": 1000
  }, {
    "country": "Japan",
    "visits": 1200
  }, {
    "country": "Germany",
    "visits": 2000
  }, {
    "country": "UK",
    "visits": 1000
  }, {
    "country": "France",
    "visits": 1000
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 500
  }, {
    "country": "Russia",
    "visits": 500
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  } ];

var dataProvider1 = [ {
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 665
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  } ];

  var chtrvals = {
  "type": "serial",
  "theme": "light",
  "dataProvider": dataProvider1,
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  }

};
var chart = AmCharts.makeChart( "chartdiv", chtrvals );

function changedp(){
       chart.dataProvider =  dataProvider2;
       chart.validateData();
}