AmCharts.makeChart 和 new AmCharts.AmSerialChart() 有什么区别?
What is difference between AmCharts.makeChart and new AmCharts.AmSerialChart();
一些 AmCharts demos 使用 AmCharts.makeChart
其他 AmCharts demos 使用 new AmCharts.AmSerialChart();
这两种方法有什么区别?
使用 AmCharts.AmSerialChart()
,您必须实例化所有组件(图形、轴等),为这些对象添加属性,然后将它们分配给图表。这是创建图表的一种非常低效的方法,正如您在文档(您的第二个 link 参考)中看到的那样,已弃用。
因为它的版本 3 AmCharts
支持新的图表构造函数,您可以在其中以 JSON
格式指定所有属性。
示例:
旧样式:
AmCharts.ready(function () {
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
// category axis
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "DD";
// graph
var graph = new AmCharts.AmGraph();
graph1.valueField = "value";
graph1.bullet = "round";
chart.addGraph(graph1);
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
新风格:(doc)
AmCharts.makeChart("chartdiv", {
type: "serial",
pathToImages: "../amcharts/images/",
dataProvider: chartData,
categoryField: "date",
categoryAxis: {
parseDates: true,
minPeriod: "ss"
},
graphs: [{
valueField: "value",
bullet: "round"
}],
chartCursor: {
cursorPosition: "mouse"
},
});
一些 AmCharts demos 使用 AmCharts.makeChart
其他 AmCharts demos 使用 new AmCharts.AmSerialChart();
这两种方法有什么区别?
使用 AmCharts.AmSerialChart()
,您必须实例化所有组件(图形、轴等),为这些对象添加属性,然后将它们分配给图表。这是创建图表的一种非常低效的方法,正如您在文档(您的第二个 link 参考)中看到的那样,已弃用。
因为它的版本 3 AmCharts
支持新的图表构造函数,您可以在其中以 JSON
格式指定所有属性。
示例:
旧样式:
AmCharts.ready(function () {
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
// category axis
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "DD";
// graph
var graph = new AmCharts.AmGraph();
graph1.valueField = "value";
graph1.bullet = "round";
chart.addGraph(graph1);
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
新风格:(doc)
AmCharts.makeChart("chartdiv", {
type: "serial",
pathToImages: "../amcharts/images/",
dataProvider: chartData,
categoryField: "date",
categoryAxis: {
parseDates: true,
minPeriod: "ss"
},
graphs: [{
valueField: "value",
bullet: "round"
}],
chartCursor: {
cursorPosition: "mouse"
},
});