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"
           }
       })
   );
   

Answer 2

图表实例重用了您作为配置传入的对象，因此自然不能将同一个对象传递给多个图表。

不过，您可以做的是在应用修改并传入图表实例之前传入重复的配置对象。

this SO thread中有很好的对象克隆功能。

所以基本上你可以这样做：

// define universal config
var universalConfig = {...};

// clone universalConfig
var instanceConfig1 = clone(universalConfig);

// make modifications
instaceConfig1.categoryField = "OCCUR_DATE";

// create the chart
var chart = AmCharts.makeChart("plot1", instaceConfig1);

// repeat
// ...

这是working example on CodePen。