javascript - amchart - 将参数传递给属性/跨图表重用属性/跨多个图表使用相同的属性

Question

这是我用来绘制折线图的代码。

var db_query = <?php echo json_encode($db_query_1) ?>;
var chart;
var graph;

/* chart initialization */
var chart = AmCharts.makeChart("plot1", {
    type: "serial",
    categoryField: "OCCUR_DATE",
    graphs: [{
        type: "smoothedLine",
        theme: "light",
        valueField: "FREQ"
    }]
})

$.ajax({
    type: 'POST',       
    url: "mySQL.php",
    data: {'db_que': db_query},
    dataType: 'html',
    context: document.body,
    global: false,
    async:true,
    success: function(data) {
        //alert(data);
        chart.dataProvider = eval(data);
        chart.validateNow();
    }
});

我愿意

1. 创建一个单独的 javascript 文件，其中为每种线型、饼图、条形图等类型的图形定义属性并导入该 javascript 文件

2. 替换此:

   var chart = AmCharts.makeChart("plot1", {
       type: "serial",
       categoryField: "OCCUR_DATE",
       graphs: [{
           type: "smoothedLine",
           theme: "light",
           valueField: "FREQ"
       }]
   })
   

   与

   var chart = AmCharts.makeChart("plot1", options_line_graph);
   

3. 我希望能够将参数传递给x 轴和 y 轴标题以及图表名称。这些至少是非常我现在能想到的变量参数很少。如果我能实现这个目标的话我认为添加更多可变参数可以轻松完成。

我在这里寻求帮助的原因是，我有超过 30 个折线图、20 个饼图以及一些我将绘制的其他类型。一遍又一遍地设置同一组属性听起来是一种低效的做事方式。

有人可以指导/帮助我吗？

Answer 1

1. 只需创建一个 JavaScript 文件，将默认配置声明为变量。
   例如:
   

   var defaultPlotConfig = {
       /* amCharts configuration object */
   }
   

   并在创建图表之前将它们插入到您的 html 中

   <script src="defaults.js"></script>
   

2. 我假设您可以使用jQuery(您的请求已经在使用它)
   您必须为您的配置对象制作深拷贝。
   jQuery.extend()使这变得非常简单(您将在第 3 点中看到我为什么使用它)。
   该方法返回参数中传递的对象的合并对象。你要做的是:

   var plotChart1 = AmCharts.makeChart("plot1", $.extend({}, defaultPlotConfig));
   

   重要提示:第一个参数必须是新对象 {}，因为它是返回的对象。

3. 使用 extend() 方法，您可以合并多个对象。参数中的最后一个对象具有优先权。您所要做的就是:

   var plotChart1 = AmCharts.makeChart("plot1",
       $.extend({}, defaultPlotConfig, {
           /* these will overwrite the defaults */
           categoryAxis: {
               title: "x axis title"
           }
       })
   );