amchart - 将参数传递给跨 graphs/Use 相同属性的 properties/reuse 属性跨多个图形

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

我愿意

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

替换为：

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

我希望能够将参数传递给 x-axis & y-axis 标题和图表名称。这些至少是最我现在能想到的几个可变参数。如果我能做到这一点，我想添加更多可变参数可以很容易地完成。

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

有人可以 guide/help 我吗？

Answer 1

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

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

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。

Answer 2

只需创建一个 JavaScript 文件，将您的默认配置声明为变量。
例如：
```
var defaultPlotConfig = {
    /* amCharts configuration object */
}
```
并将它们插入到您的 html 之前您创建图表
```
<script src="defaults.js"></script>
```
我假设你可以使用 jQuery（你的请求已经在使用它）
你必须为你的配置对象做一个深拷贝。
jQuery.extend() 使这变得非常简单（您会在第 3 点中看到我为什么要使用它）。
方法 returns 你是传入参数的对象的合并对象。你要做的是：
```
var plotChart1 = AmCharts.makeChart("plot1", $.extend({}, defaultPlotConfig));
```
重要提示：第一个参数必须是新对象{}，因为它是返回的对象

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

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

amchart - 将参数传递给跨 graphs/Use 相同属性的 properties/reuse 属性跨多个图形

amchart - pass parameters to properties/reuse properties across graphs/Use same property across multiple graphs

javascript

ajax

jquery

json

amcharts

amchart - 将参数传递给跨 graphs/Use 相同 属性 的 properties/reuse 属性跨多个图形

amchart - pass parameters to properties/reuse properties across graphs/Use same property across multiple graphs

javascript

ajax

jquery

json

amcharts

amchart - 将参数传递给跨 graphs/Use 相同属性的 properties/reuse 属性跨多个图形