{"id":4098,"date":"2024-02-22T14:04:37","date_gmt":"2024-02-22T06:04:37","guid":{"rendered":"http:\/\/www.ponybai.com\/?p=4098"},"modified":"2023-12-05T15:54:54","modified_gmt":"2023-12-05T07:54:54","slug":"visualforce-%e5%9b%be%e8%a1%a8","status":"publish","type":"post","link":"http:\/\/www.ponybai.com\/?p=4098","title":{"rendered":"Visualforce \u56fe\u8868"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a><\/a>Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4ec0\u4e48\u662f Visualforce Charting\uff1f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a><\/a>Visualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528 Visualforce Charting\uff1f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 Visualforce \u56fe\u8868\u65f6 \u6807\u51c6 Salesforce \u56fe\u8868\u548c\u4eea\u8868\u677f \u662f\u4e0d\u591f\u7684\uff0c\u6216\u8005\u5f53\u60a8\u5e0c\u671b\u7f16\u5199\u7ec4\u5408\u56fe\u8868\u548c\u6570\u636e\u8868\u7684\u81ea\u5b9a\u4e49\u9875\u9762\u65f6 \u4ee5\u5bf9\u7ec4\u7ec7\u66f4\u6709\u7528\u7684\u65b9\u5f0f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Visualforce Charting \u7684\u66ff\u4ee3\u54c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Salesforce \u63d0\u4f9b\u4e86\u8bb8\u591a \u4eea\u8868\u677f\u548c\u62a5\u8868\uff0c\u652f\u6301\u5404\u79cd\u4e1a\u52a1\u56fe\u8868\u3002\u8fd9\u4e9b\u56fe\u8868\u53ef\u4ee5\u66f4\u7b80\u5355 \u8fdb\u884c\u521b\u5efa\u548c\u81ea\u5b9a\u4e49\uff0c\u56e0\u4e3a\u5b83\u4eec\u4e0d\u9700\u8981\u5728 Visualforce \u6216 Apex \u4e2d\u7f16\u7a0b\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visualforce \u56fe\u8868\u65e8\u5728 \u7075\u6d3b\uff0c\u4f46\u4e5f\u6613\u4e8e\u4f7f\u7528\u3002\u5b83\u901a\u5e38\u63d0\u4f9b\u6761\u5f62\u56fe\u3001\u6298\u7ebf\u56fe\u3001\u9762\u79ef\u56fe\u548c\u997c\u56fe\u7684\u53d8\u5316 \u7528\u4e8e\u5546\u4e1a\u56fe\u5f62\uff0c\u4ee5\u53ca\u96f7\u8fbe\u56fe\u3001\u4eea\u8868\u56fe\u548c\u6563\u70b9\u56fe\uff0c\u4ee5\u5b9e\u73b0\u66f4\u4e13\u4e1a \u5236\u56fe\u3002\u5982\u679c\u60a8\u9700\u8981\u4e0d\u540c\u7684\u56fe\u8868\u7c7b\u578b\uff0c\u6216\u8005\u60f3\u8981\u6dfb\u52a0\u9ad8\u7ea7\u7528\u6237\u6216\u9875\u9762\u4ea4\u4e92\uff0c \u60a8\u53ef\u80fd\u5e0c\u671b\u6539\u7528 JavaScript \u56fe\u8868\u5e93\u8fdb\u884c\u8c03\u67e5\u3002\u8fd9\u662f\u66f4\u591a\u7684\u5de5\u4f5c\uff0c \u4f46\u5141\u8bb8\u66f4\u5927\u7684\u5b9a\u5236\u3002\u4f8b\u5982\uff0c\u8bf7\u53c2\u9605\u96c6\u6210 Visualforce \u548c Google Charts\u3002\u5728 Visualforce \u9875\u9762\u4e2d\u4f7f\u7528 JavaScript \u63d0\u4f9b\u4e86\u6709\u5173\u5982\u4f55\u5728\u00a0Visualforce \u4e2d\u4f7f\u7528 JavaScript\u00a0\u5e93\u7684\u66f4\u591a\u4fe1\u606f\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Visualforce \u56fe\u8868\u9650\u5236\u548c \u8003\u8651<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u90e8\u5206\u5217\u51fa\u4e86 Visualforce Charting \u7684\u6ce8\u610f\u4e8b\u9879\u548c\u5df2\u77e5\u9650\u5236\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visualforce \u56fe\u8868\u4ec5\u5728 \u652f\u6301\u53ef\u7f29\u653e\u77e2\u91cf\u56fe\u5f62 \uff08SVG\uff09 \u7684\u6d4f\u89c8\u5668\u3002\u6709\u5173\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605\u00a0WC3 SVG \u5de5\u4f5c \u7ec4\u3002<\/li>\n\n\n\n<li>Visualforce \u56fe\u8868\u4f7f\u7528 JavaScript \u7ed8\u5236\u56fe\u8868\u3002Visualforce \u56fe\u8868\u4e0d\u4f1a\u663e\u793a\u5728\u5448\u73b0\u4e3a PDF \u7684\u9875\u9762\u4e2d\u3002<\/li>\n\n\n\n<li>\u7535\u5b50\u90ae\u4ef6\u5ba2\u6237\u7aef\u901a\u5e38\u4e0d\u652f\u6301\u5728\u90ae\u4ef6\u4e2d\u6267\u884c JavaScript\u3002\u4e0d\u8981\u5728\u7535\u5b50\u90ae\u4ef6\u4e2d\u4f7f\u7528 Visualforce \u56fe\u8868\uff0c\u6216\u8005 \u7535\u5b50\u90ae\u4ef6\u6a21\u677f\u3002<\/li>\n\n\n\n<li>Visualforce \u56fe\u8868\u53d1\u9001\u9519\u8bef\u548c \u6d88\u606f\u53d1\u9001\u5230 JavaScript \u63a7\u5236\u53f0\u3002\u4f7f JavaScript \u8c03\u8bd5\u5de5\u5177\uff08\u5982 Firebug\uff09\u4fdd\u6301\u6d3b\u52a8\u72b6\u6001 \u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u3002<\/li>\n\n\n\n<li>\u76ee\u524d\u4e0d\u652f\u6301\u52a8\u6001\uff08\u9876\u70b9\u751f\u6210\u7684\uff09\u56fe\u8868\u7ec4\u4ef6\u3002<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Visualforce Charting \u7684\u5de5\u4f5c\u539f\u7406<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9a\u4e49\u4e86 Visualforce \u56fe\u8868 \u4f7f\u7528\u4e00\u7cfb\u5217\u56fe\u8868\u7ec4\u4ef6\uff0c\u7136\u540e\u5c06\u8fd9\u4e9b\u7ec4\u4ef6\u94fe\u63a5\u5230\u8981\u5728 \u56fe\u8868\u3002\u4f7f\u7528 Visualforce \u521b\u5efa\u56fe\u8868 \u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u7f16\u5199\u4e00\u4e2a Apex \u65b9\u6cd5\uff0c\u7528\u4e8e\u67e5\u8be2\u3001\u8ba1\u7b97\u548c\u5305\u88c5\u56fe\u8868\u6570\u636e\u4ee5\u53d1\u9001\u5230 \u6d4f\u89c8\u5668\u3002<\/li>\n\n\n\n<li>\u4f7f\u7528 Visualforce \u56fe\u8868\u7ec4\u4ef6\u5b9a\u4e49\u56fe\u8868\u3002<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f53\u5305\u542b\u56fe\u8868\u7684\u9875\u9762\u52a0\u8f7d\u65f6\uff0c\u56fe\u8868\u6570\u636e\u7ed1\u5b9a\u5230\u56fe\u8868\u7ec4\u4ef6\uff0c\u5e76\u4e14 \u751f\u6210\u7ed8\u5236\u56fe\u8868\u7684 JavaScript\u3002\u5f53 JavaScript \u6267\u884c\u65f6\uff0c\u56fe\u8868\u4f1a\u88ab\u7ed8\u5236\u8fdb\u53bb \u6d4f\u89c8\u5668\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u8868\u793a\u4f8b<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Visualforce \u56fe\u8868\u8981\u6c42\u60a8\u521b\u5efa\u4e00\u4e2a\u56fe\u8868\u5bb9\u5668\u7ec4\u4ef6\uff0c\u8be5\u7ec4\u4ef6 \u5305\u542b\u81f3\u5c11\u4e00\u4e2a\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u3002\u60a8\u53ef\u4ee5\u9009\u62e9\u6dfb\u52a0 \u9644\u52a0\u7cfb\u5217\u7ec4\u4ef6\u3001\u56fe\u8868\u8f74\u4ee5\u53ca\u6807\u7b7e\u7ec4\u4ef6 \u4f8b\u5982\u56fe\u4f8b\u3001\u56fe\u8868\u6807\u7b7e\u548c\u6570\u636e\u70b9\u7684\u5de5\u5177\u63d0\u793a\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u997c\u56fe\u548c\u521b\u5efa\u5b83\u7684\u6807\u8bb0\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"432\" height=\"352\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie.png\" alt=\"\" class=\"wp-image-4100\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie.png 432w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie-300x244.png 300w\" sizes=\"(max-width: 432px) 100vw, 432px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"PieChartController\" title=\"Pie Chart\"&gt;\n    &lt;apex:chart height=\"350\" width=\"450\" data=\"{!pieData}\"&gt;\n        &lt;apex:pieSeries dataField=\"data\" labelField=\"name\"\/&gt;\n        &lt;apex:legend position=\"right\"\/&gt;\n    &lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7ec4\u4ef6 \u5b9a\u4e49\u56fe\u8868\u5bb9\u5668\uff0c\u5e76\u5c06\u7ec4\u4ef6\u7ed1\u5b9a\u5230\u6570\u636e\u6e90\uff0c \u63a7\u5236\u5668 \u65b9\u6cd5\u3002\u63cf\u8ff0\u8981\u5728\u8fd4\u56de\u7684\u6570\u636e\u4e2d\u8bbf\u95ee\u7684\u6807\u7b7e\u548c\u6570\u636e\u5b57\u6bb5\uff0c \u6807\u8bb0\u6bcf\u4e2a\u6570\u636e\u70b9\u5e76\u8c03\u6574\u5176\u5927\u5c0f\u3002<samp>&lt;apex:chart&gt;<\/samp><samp>getPieData()<\/samp><samp>&lt;apex:pieSeries&gt;<\/samp>\u4e0b\u9762\u662f\u5173\u8054\u7684\u63a7\u5236\u5668\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class PieChartController {\n    public List&lt;PieWedgeData&gt; getPieData() {\n        List&lt;PieWedgeData&gt; data = new List&lt;PieWedgeData&gt;();\n        data.add(new PieWedgeData('Jan', 30));\n        data.add(new PieWedgeData('Feb', 15));\n        data.add(new PieWedgeData('Mar', 10));\n        data.add(new PieWedgeData('Apr', 20));\n        data.add(new PieWedgeData('May', 20));\n        data.add(new PieWedgeData('Jun', 5));\n        return data;\n    }\n\n    \/\/ Wrapper class\n    public class PieWedgeData {\n\n        public String name { get; set; }\n        public Integer data { get; set; }\n\n        public PieWedgeData(String name, Integer data) {\n            this.name = name;\n            this.data = data;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e2a\u63a7\u5236\u5668\u523b\u610f\u7b80\u5355;\u4f60\u901a\u5e38 \u53d1\u51fa\u4e00\u4e2a\u6216\u591a\u4e2a SOQL \u67e5\u8be2\u4ee5\u6536\u96c6\u6570\u636e\u3002\u4ee5\u4e0b\u662f\u793a\u4f8b\u6240\u8bf4\u660e\u7684\u8981\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65b9\u6cd5 \u8fd4\u56de\u7b80\u5355\u5bf9\u8c61\u7684 List\uff0c\u4f7f\u7528\u7684\u5185\u90e8\u7c7b PieWedgeData \u4f5c\u4e3a\u5305\u88c5\u5668\u3002\u5217\u8868\u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u7528\u4e8e\u521b\u5efa\u6570\u636e\u70b9\u3002<samp>getPieData()<\/samp><\/li>\n\n\n\n<li>PieWedgeData \u7c7b\u53ea\u662f\u4e00\u7ec4\u5c5e\u6027\uff0c\u672c\u8d28\u4e0a\u662f \u7528\u4f5c&nbsp;name= store\u3002<var>value<\/var><\/li>\n\n\n\n<li>\u56fe\u8868\u7cfb\u5217\u7ec4\u4ef6\u5b9a\u4e49 PieWedgeData \u7c7b\u4e2d\u7528\u4e8e\u786e\u5b9a\u7684\u5c5e\u6027 \u7cfb\u5217\u4e2d\u7684\u6bcf\u4e00\u70b9\u3002\u5728\u8fd9\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\u4e2d\uff0c\u6ca1\u6709 \u795e\u79d8\uff0c\u4f46\u5728\u5177\u6709\u591a\u4e2a\u7cfb\u5217\u548c\u8f74\u7684\u56fe\u8868\u4e2d\uff0c\u6b64\u7ea6\u5b9a \u5141\u8bb8\u5728\u4e00\u4e2a List \u5bf9\u8c61\u4e2d\u9ad8\u6548\u8fd4\u56de\u6574\u4e2a\u6570\u636e\u96c6\u3002<samp>&lt;apex:pieSeries&gt;<\/samp><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u63d0\u4f9b\u56fe\u8868\u6570\u636e<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Visualforce \u56fe\u8868\u901a\u8fc7 data \u5c5e\u6027\u7ed1\u5b9a\u5230\u5176\u6570\u636e\u6e90 \u5728\u7ec4\u4ef6\u4e0a\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:chart&gt;<\/samp>\u53ef\u4ee5\u901a\u8fc7\u51e0\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\u63d0\u4f9b\u6570\u636e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f5c\u4e3a\u8868\u793a \u63a7\u5236\u5668\u65b9\u6cd5\u53c2\u8003<\/li>\n\n\n\n<li>\u4f5c\u4e3a\u8868\u793a JavaScript \u51fd\u6570<\/li>\n\n\n\n<li>\u4f5c\u4e3a\u8868\u793a JavaScript \u6570\u7ec4<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u901a\u8fc7\u63a7\u5236\u5668\u65b9\u6cd5\u63d0\u4f9b\u56fe\u8868\u6570\u636e<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u5411\u56fe\u8868\u63d0\u4f9b\u6570\u636e\u7684\u6700\u76f4\u63a5\u65b9\u6cd5\u662f\u4f7f\u7528 Visualforce \u8868\u8fbe\u5f0f\uff0c\u8be5\u8868\u8fbe\u5f0f \u5f15\u7528\u63a7\u5236\u5668\u65b9\u6cd5\u3002\u53ea\u9700\u5728\u5c5e\u6027\u4e2d\u5f15\u7528\u63a7\u5236\u5668\u5373\u53ef\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:chart&gt;<\/samp><samp>data<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u670d\u52a1\u5668\u7aef\uff0c\u7f16\u5199\u4e00\u4e2a\u8fd4\u56de\u5bf9\u8c61\u5217\u8868\u7684\u63a7\u5236\u5668\u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u53ef\u4ee5 \u662f\u60a8\u81ea\u5df1\u7684 Apex \u5305\u88c5\u5668\u5bf9\u8c61\uff0c\u5982\u7b80\u5355\u56fe\u8868\u793a\u4f8b\u3001sObject \u6216\u5bf9\u8c61\u4e2d\u6240\u793a\u3002\u8be5\u65b9\u6cd5\u5728\u670d\u52a1\u5668\u7aef\u8fdb\u884c\u8bc4\u4f30\uff0c\u5e76\u5c06\u7ed3\u679c\u5e8f\u5217\u5316\u4e3a JSON\u3002\u5728 \u5ba2\u6237\u7aef\uff0c\u8fd9\u4e9b\u7ed3\u679c\u7531 \u76f4\u63a5\u4f7f\u7528 \uff0c\u6ca1\u6709\u8fdb\u4e00\u6b65\u7684\u5904\u7406\u673a\u4f1a\u3002<samp>AggregateResult&lt;apex:chart><\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e3a\u4e86\u7528 sObjects \u6765\u8bf4\u660e\u8fd9\u79cd\u6280\u672f\uff0c\u8fd9\u91cc\u6709\u4e00\u4e2a\u7b80\u5355\u7684\u63a7\u5236\u5668\uff0c\u5b83\u8fd4\u56de\u4e00\u4e2a \u5546\u673a\u5217\u8868\uff0c\u4ee5\u53ca\u5176\u91d1\u989d\u7684\u6761\u5f62\u56fe\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class OppsController {\n    \n    \/\/ Get a set of Opportunities\n    public ApexPages.StandardSetController setCon {\n        get {\n            if(setCon == null) {\n                setCon = new ApexPages.StandardSetController(Database.getQueryLocator(\n                      &#91;SELECT name, type, amount, closedate FROM Opportunity]));\n                setCon.setPageSize(5);\n            }\n            return setCon;\n        }\n        set;\n    }\n    \n    public List&lt;Opportunity&gt; getOpportunities() {\n         return (List&lt;Opportunity&gt;) setCon.getRecords();\n    }\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"OppsController\"&gt;\n    &lt;apex:chart data=\"{!Opportunities}\" width=\"600\" height=\"400\"&gt;\n        &lt;apex:axis type=\"Category\" position=\"left\" fields=\"Name\" title=\"Opportunities\"\/&gt;\n        &lt;apex:axis type=\"Numeric\" position=\"bottom\" fields=\"Amount\" title=\"Amount\"\/&gt;\n        &lt;apex:barSeries orientation=\"horizontal\" axis=\"bottom\" \n            xField=\"Name\" yField=\"Amount\"\/&gt;\n    &lt;\/apex:chart&gt;\n    &lt;apex:dataTable value=\"{!Opportunities}\" var=\"opp\"&gt;\n        &lt;apex:column headerValue=\"Opportunity\" value=\"{!opp.name}\"\/&gt;\n        &lt;apex:column headerValue=\"Amount\" value=\"{!opp.amount}\"\/&gt;\n    &lt;\/apex:dataTable&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"595\" height=\"394\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/chart-1.png\" alt=\"\" class=\"wp-image-4101\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/chart-1.png 595w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/chart-1-300x199.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u5173\u4e8e\u6b64\u793a\u4f8b\uff0c\u6709\u4e24\u4ef6\u91cd\u8981\u4e8b\u9879\u9700\u8981\u6ce8\u610f\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visualforce \u56fe\u8868 \u7ec4\u4ef6\u4ece List of Opportunity sObjects \u4e2d\u8bbf\u95ee\u6570\u636e\u5c5e\u6027 \u4e0e\u7b80\u5355\u56fe\u8868\u793a\u4f8b\u4e2d\u4f7f\u7528\u7684\u7b80\u5355\u00a0Data \u5bf9\u8c61\u76f8\u540c\u3002<\/li>\n\n\n\n<li>\u5728 JavaScript \u4e2d\uff0c\u7528\u4f5c\u6570\u636e\u5c5e\u6027\u7684\u5bf9\u8c61\u5b57\u6bb5\u540d\u79f0\u533a\u5206\u5927\u5c0f\u5199 \u800c Apex \u548c Visualforce \u4e2d\u7684\u5b57\u6bb5\u540d\u79f0\u662f&nbsp;<strong>\u533a\u5206\u5927\u5c0f<\/strong>\u5199\u3002\u8bf7\u6ce8\u610f\u5728\u8f74\u548c\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u7684 \u3001 \u548c \u5c5e\u6027\u4e2d\u4f7f\u7528\u7cbe\u786e\u7684\u5b57\u6bb5\u540d\u79f0\uff0c\u6216\u8005 \u56fe\u8868\u5c06\u9759\u9ed8\u5931\u8d25\u3002<samp>fields<\/samp><samp>xField<\/samp><samp>yField<\/samp><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u4f7f\u7528 JavaScript \u63d0\u4f9b\u56fe\u8868\u6570\u636e \u529f\u80fd<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 JavaScript \u8fdc\u7a0b\u5904\u7406\u6216\u5916\u90e8\uff08\u975e Salesforce\uff09\u8bbf\u95ee\u6570\u636e \u6570\u636e\u6e90\uff0c\u5219\u4e3a\u7ec4\u4ef6\u63d0\u4f9b JavaScript \u51fd\u6570\u7684\u540d\u79f0\uff0c\u8be5\u51fd\u6570\u63d0\u4f9b \u6570\u636e\u3002\u8be5 JavaScript \u51fd\u6570\u5fc5\u987b\u5728 Visualforce \u9875\u9762\u4e2d\u5b9a\u4e49\u6216\u94fe\u63a5\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:chart&gt;<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u51fd\u6570\u6709\u673a\u4f1a\u5728\u4e4b\u524d\u64cd\u4f5c\u7ed3\u679c \u5c06\u5176\u4f20\u9012\u7ed9 \uff0c\u6216\u6267\u884c\u5176\u4ed6\u7528\u6237\u754c\u9762\u6216\u9875\u9762\u66f4\u65b0\u3002<samp>&lt;apex:chart&gt;<\/samp>JavaScript \u51fd\u6570\u5fc5\u987b\u5c06\u56de\u8c03\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\uff0c \u5e76\u4f7f\u7528\u51fd\u6570\u7684\u6570\u636e\u7ed3\u679c\u5bf9\u8c61\u8c03\u7528\u56de\u8c03\u3002\u8fd9 \u6700\u7b80\u5355\u7684\u5de5\u4f5c JavaScript \u51fd\u6570\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page&gt;\n    &lt;script&gt;\n    function getRemoteData(callback) {\n       PieChartController.getRemotePieData(function(result, event) {\n           if(event.status &amp;&amp; result &amp;&amp; result.constructor === Array) {\n               callback(result);\n           }\n       });\n    }\n    &lt;\/script&gt;\n\n    &lt;apex:chart data=\"getRemoteData\" ...&gt;&lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u82e5\u8981\u652f\u6301\u6b64\u56fe\u8868\uff0c\u8bf7\u5c06\u4ee5\u4e0b\u63a7\u5236\u5668\u65b9\u6cd5\u6dfb\u52a0\u5230\u7b80\u5355\u56fe\u8868\u793a\u4f8b\u4e2d\u5b9a\u4e49\u7684\u7c7b\uff1a<samp>PieChartController<\/samp><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@RemoteAction\npublic static List&lt;PieWedgeData&gt; getRemotePieData() {\n    List&lt;PieWedgeData&gt; data = new List&lt;PieWedgeData&gt;();\n    data.add(new PieWedgeData('Jan', 30));\n    data.add(new PieWedgeData('Feb', 15));\n    data.add(new PieWedgeData('Mar', 10));\n    data.add(new PieWedgeData('Apr', 20));\n    data.add(new PieWedgeData('May', 20));\n    data.add(new PieWedgeData('Jun',  5));\n    return data;\n}<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">\u901a\u8fc7 JavaScript \u6570\u7ec4\u63d0\u4f9b\u56fe\u8868\u6570\u636e<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u60a8\u53ef\u4ee5\u4f7f\u7528 Visualforce \u4f7f\u7528\u975e Salesforce \u6570\u636e\u7ed8\u5236\u56fe\u8868 sources\uff0c\u901a\u8fc7\u6784\u5efa\u4e00\u4e2a JavaScript \u6570\u7ec4\uff0c\u5728\u9875\u9762\u4e2d\u4f60\u81ea\u5df1\u7684 JavaScript \u4ee3\u7801\u4e2d\uff0c\u4ee5\u53ca \u5c06\u8be5\u6570\u7ec4\u7684\u540d\u79f0\u63d0\u4f9b\u7ed9 \u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:chart&gt;<\/samp>\u4ee5\u4e0b\u7b80\u5355\u7684\u4ee3\u7801\u5bf9\u6b64\u8fdb\u884c\u4e86\u8bf4\u660e \u6280\u672f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page&gt;\n    &lt;script&gt;\n    \/\/ Build the chart data array in JavaScript\n    var dataArray = new Array();\n    dataArray.push({'data1':33,'data2':66,'data3':80,'name':'Jan'});\n    dataArray.push({'data1':33,'data2':66,'data3':80,'name':'Feb'});\n    \/\/ ...\n    &lt;\/script&gt;\n\n    &lt;apex:chart data=\"dataArray\" ...&gt;&lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u6b64\u6280\u672f\u65f6\uff0c\u5982\u679c\u60a8\u7684\u6570\u636e\u6765\u81ea\u975e Salesforce \u6e90\uff0c\u5219\u53ef\u80fd\u4e0d\u4f1a \u6839\u672c\u4e0d\u9700\u8981\u4efb\u4f55\u670d\u52a1\u5668\u7aef Apex \u4ee3\u7801\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u56fe\u8868\u6570\u636e\u683c\u5f0f<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u63d0\u4f9b\u7ed9 Visualforce \u7684\u6570\u636e \u56fe\u8868\u5fc5\u987b\u6ee1\u8db3\u67d0\u4e9b\u7279\u5b9a\u8981\u6c42\u3002\u6570\u636e\u96c6\u5408\u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u5fc5\u987b\u5305\u542b\u6240\u6709 \u7ec4\u4ef6\u4e2d\u5f15\u7528\u7684\u5b57\u6bb5 \u7ed1\u5b9a\u5230\u8be5\u6570\u636e\u6e90\u7684\u5c42\u6b21\u7ed3\u6784\u3002\u5982\u679c\u672a\u63d0\u4f9b\u6240\u6709\u5b57\u6bb5\uff0c\u5219\u5ba2\u6237\u7aef \u629b\u51fa JavaScript \u9519\u8bef\uff0c\u60a8\u53ef\u4ee5\u5728 JavaScript \u63a7\u5236\u53f0\u4e2d\u67e5\u770b\u8be5\u9519\u8bef\uff0c\u4f8b\u5982 \u8424\u706b\u866b\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:chart&gt;<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apex \u65b9\u6cd5\u63d0\u4f9b\u7684\u56fe\u8868\u6570\u636e\u5e94\u4e3a\u7edf\u4e00\u5bf9\u8c61\u7684\u5217\u8868\u3002\u8fd9\u4e9b\u5bf9\u8c61\u53ef\u4ee5\u662f \u7b80\u5355\u7684\u5305\u88c5\u5668\u3001sObject \u6216\u5bf9\u8c61\u3002 \u6570\u636e\u5b57\u6bb5\u53ef\u4ee5\u4f5c\u4e3a\u516c\u5171\u6210\u5458\u53d8\u91cf\u6216\u5c5e\u6027\u8fdb\u884c\u8bbf\u95ee\u3002<samp>AggregateResult<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript \u65b9\u6cd5\u63d0\u4f9b\u7684\u56fe\u8868\u6570\u636e\u5e94\u8be5\u662f\u6570\u7ec4\u7684 JavaScript \u6570\u7ec4\u3002\u6bcf\u4e2a\u5185\u90e8 \u6570\u7ec4\u8868\u793a\u8bb0\u5f55\u6216\u6570\u636e\u70b9\u3002\u6570\u636e\u5b57\u6bb5\u53ef\u4f5c\u4e3a\u540d\u79f0\uff1a\u503c\u5bf9\u8fdb\u884c\u8bbf\u95ee\u3002 \u6709\u5173\u793a\u4f8b\uff0c\u8bf7\u53c2\u9605\u901a\u8fc7 JavaScript \u6570\u7ec4\u63d0\u4f9b\u56fe\u8868\u6570\u636e\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u4f7f\u7528 Visualforce Charting \u6784\u5efa\u590d\u6742\u56fe\u8868<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 Visualforce \u56fe\u8868\u5c06\u5404\u79cd\u56fe\u8868\u7ec4\u4ef6\u7ec4\u88c5\u6210\u4e00\u4e2a\u590d\u6742\u7684\u56fe\u8868\u7ec4\u4ef6 \u8868\u793a\u591a\u7ec4\u76f8\u5173\u6570\u636e\u7684\u56fe\u8868\u3002\u6700\u7ec8\u7ed3\u679c \u53ef\u4ee5\u975e\u5e38\u590d\u6742\u548c\u5f15\u4eba\u6ce8\u76ee\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u56fe\u8868\u63a7\u5236\u5668<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u540e\u9762\u7684\u4f8b\u5b50 \u5728\u672c\u4e3b\u9898\u4e2d\uff0c\u8bf7\u4f7f\u7528\u4ee5\u4e0b\u63a7\u5236\u5668\uff0c\u8fd9\u662f\u4e00\u4e2a\u9002\u5ea6\u7684\u6269\u5c55\u00a0\u63a7\u5236\u5668\u7684\u7b80\u5355\u56fe\u8868\u793a\u4f8b\u3002\u5b83\u5305\u542b\u66f4\u591a\u6570\u636e\uff0c\u4ee5\u53ca\u53ef\u4ee5\u8c03\u7528\u7684\u65b9\u6cd5 \u901a\u8fc7\u8fdc\u7a0b JavaScript \u8c03\u7528\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class ChartController {\n    \/\/ Return a list of data points for a chart\n    public List&lt;Data&gt; getData() {\n        return ChartController.getChartData();\n    }\n    \n    \/\/ Make the chart data available via JavaScript remoting\n    @RemoteAction\n    public static List&lt;Data&gt; getRemoteData() {\n        return ChartController.getChartData();\n    }\n\n    \/\/ The actual chart data; needs to be static to be\n    \/\/ called by a @RemoteAction method\n    public static List&lt;Data&gt; getChartData() {\n        List&lt;Data&gt; data = new List&lt;Data&gt;();\n        data.add(new Data('Jan', 30, 90, 55));\n        data.add(new Data('Feb', 44, 15, 65));\n        data.add(new Data('Mar', 25, 32, 75));\n        data.add(new Data('Apr', 74, 28, 85));\n        data.add(new Data('May', 65, 51, 95));\n        data.add(new Data('Jun', 33, 45, 99));\n        data.add(new Data('Jul', 92, 82, 30));\n        data.add(new Data('Aug', 87, 73, 45));\n        data.add(new Data('Sep', 34, 65, 55));\n        data.add(new Data('Oct', 78, 66, 56));\n        data.add(new Data('Nov', 80, 67, 53));\n        data.add(new Data('Dec', 17, 70, 70));\n        return data;\n    }\n    \n    \/\/ Wrapper class\n    public class Data {\n        public String name { get; set; }\n        public Integer data1 { get; set; }\n        public Integer data2 { get; set; }\n        public Integer data3 { get; set; }\n        public Data(String name, Integer data1, Integer data2, Integer data3) {\n            this.name = name;\n            this.data1 = data1;\n            this.data2 = data2;\n            this.data3 = data3;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ce8\u610f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u4e3b\u9898\u7684\u56fe\u8868\u793a\u4f8b\u4e2d\u672a\u4f7f\u7528\u8be5\u65b9\u6cd5\uff0c\u4f46 \u5b83\u8bf4\u660e\u4e86\u5982\u4f55\u5c06\u6570\u636e\u751f\u6210\u65b9\u6cd5\u91cd\u7528 \u670d\u52a1\u5668\u7aef\u548c JavaScript \u8fdc\u7a0b\u5904\u7406\u65b9\u6cd5\u3002<samp>@RemoteAction<\/samp><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 \u6298\u7ebf\u56fe<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u6298\u7ebf\u56fe\uff0c\u5b83\u7ed8\u5236\u4e86\u4ee5\u4e0b\u56fe\u8868\u4e4b\u4e00 \u6570\u636e\u96c6\u4e2d\u7684\u4e09\u4e2a\u6570\u636e\u7cfb\u5217\uff0c\u201cOpportunity Closed-Won\u201d\uff0c \u5728\u4e00\u4e2a\u65e5\u5386\u5e74\u5185\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"694\" height=\"400\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line.png\" alt=\"\" class=\"wp-image-4102\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line.png 694w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line-300x173.png 300w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"ChartController\"&gt;\n    &lt;apex:chart height=\"400\" width=\"700\" data=\"{!data}\"&gt;\n    \t  &lt;apex:axis type=\"Numeric\" position=\"left\" fields=\"data1\" \n            title=\"Opportunities Closed\" grid=\"true\"\/&gt;\n    \t  &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" \n            title=\"Month of the Year\"&gt;\n    \t&lt;\/apex:axis&gt;\n    \t&lt;apex:lineSeries axis=\"left\" fill=\"true\" xField=\"name\" yField=\"data1\"\n          markerType=\"cross\" markerSize=\"4\" markerFill=\"#FF0000\"\/&gt;\n   &lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5173\u4e8e\u6b64\u793a\u4f8b\u7684\u6ce8\u610f\u4e8b\u9879\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6298\u7ebf\u56fe\u548c\u6761\u5f62\u56fe\u8981\u6c42\u60a8\u5b9a\u4e49 \u7684 X \u8f74\u548c Y \u8f74 \u56fe\u8868\u3002<\/li>\n\n\n\n<li>\u5782\u76f4\u8f74\u5728\u56fe\u8868\u7684\u5de6\u4fa7\u5b9a\u4e49\uff0c\u5e76\u4e14 \u8861\u91cf\u5f53\u6708\u5b8c\u6210\u7684\u5546\u673a\u7684\u7f8e\u5143\u91d1\u989d\u3002<\/li>\n\n\n\n<li>\u6c34\u5e73\u8f74\u5728\u56fe\u8868\u5e95\u90e8\u5b9a\u4e49\uff0c\u5e76\u4e14 \u8868\u793a\u65e5\u5386\u5e74\u7684\u6708\u4efd\u3002<\/li>\n\n\n\n<li>\u5b9e\u9645\u7684\u6298\u7ebf\u56fe\uff08\u5373\u7ec4\u4ef6\uff09\u7ed1\u5b9a\u5230\u7279\u5b9a\u8f74\u3002<samp>&lt;apex:lineSeries&gt;<\/samp><\/li>\n\n\n\n<li>\u60a8\u53ef\u4ee5\u4f7f\u7528\u8bb8\u591a\u6807\u8bb0\u5c5e\u6027\u6765\u533a\u5206 \u56fe\u8868\u4e2d\u7684\u6bcf\u4e00\u6761\u7ebf\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u6dfb\u52a0\u7b2c\u4e8c\u4e2a\u6570\u636e \u7cfb\u5217<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6dfb\u52a0\u7b2c\u4e8c\u4e2a\u6570\u636e\u5e8f\u5217\uff0c\u5176\u5355\u4f4d\u4e3a \u6d4b\u91cf\u5f88\u7b80\u5355\u3002\u5728\u8fd9\u91cc\uff0c\u201c\u673a\u4f1a\u5173\u95ed-\u5931\u53bb\u201d \u6570\u636e\u96c6\u5c06\u6dfb\u52a0\u4e3a\u7b2c\u4e8c\u884c\u7cfb\u5217\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"395\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line2.png\" alt=\"\" class=\"wp-image-4103\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line2.png 699w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line2-300x170.png 300w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"ChartController\"&gt;\n    &lt;apex:chart height=\"400\" width=\"700\" data=\"{!data}\"&gt;\n    \t  &lt;apex:axis type=\"Numeric\" position=\"left\" fields=\"data1,data2\" \n            title=\"Opportunities Closed\" grid=\"true\"\/&gt;\n    \t  &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" \n            title=\"Month of the Year\"&gt;\n    \t  &lt;\/apex:axis&gt;\n    \t  &lt;apex:lineSeries axis=\"left\" fill=\"true\" xField=\"name\" yField=\"data1\"\n        \t  markerType=\"cross\" markerSize=\"4\" markerFill=\"#FF0000\"\/&gt;\n    \t  &lt;apex:lineSeries axis=\"left\" xField=\"name\" yField=\"data2\" \n            markerType=\"circle\" markerSize=\"4\" markerFill=\"#8E35EF\"\/&gt;\n    &lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u9700\u8981\u6ce8\u610f\u7684\u91cd\u8981\u4e00\u70b9\u662f\uff0cfields \u5c5e\u6027\u5982\u4f55\u5c06 \u548c fields \u7ed1\u5b9a\u5230\u5782\u76f4\u65b9\u5411 \u8be5\u7ec4\u4ef6\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u5f15\u64ce\u786e\u5b9a\u9002\u5f53\u7684 \u8f74\u7684\u523b\u5ea6\u548c\u523b\u5ea6\u7ebf\u3002<samp>data1<\/samp><samp>data2<\/samp><samp>&lt;apex:axis&gt;<\/samp><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6dfb\u52a0\u6761\u5f62\u56fe \u5e26\u7b2c\u4e8c\u8f74\u7684\u7cfb\u5217<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8981\u6dfb\u52a0\u53e6\u4e00\u4e2a\u6570\u636e\u7cfb\u5217\uff0c\u4f46 \u6839\u636e\u4e00\u7ec4\u4e0d\u540c\u7684\u5355\u4f4d\u7ed8\u5236\u56fe\u8868\uff0c\u60a8\u9700\u8981\u6dfb\u52a0\u7b2c\u4e8c\u4e2a\u5355\u4f4d \u7acb\u8f74\u3002\u4ee5\u4e0b\u793a\u4f8b\u663e\u793a\u4e86\u4e00\u4e2a\u6570\u636e\u7cfb\u5217\uff0c\u201c\u6536\u5165 \u6309\u6708\u201c\u6dfb\u52a0\u4e3a\u6761\u5f62\u56fe\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"399\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar.png\" alt=\"\" class=\"wp-image-4104\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar.png 692w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar-300x173.png 300w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"ChartController\"&gt;\n    &lt;apex:chart height=\"400\" width=\"700\" data=\"{!data}\"&gt;\n    \t  &lt;apex:axis type=\"Numeric\" position=\"left\" fields=\"data1,data2\" \n            title=\"Opportunities Closed\" grid=\"true\"\/&gt;\n        &lt;apex:axis type=\"Numeric\" position=\"right\" fields=\"data3\" \n            title=\"Revenue (millions)\"\/&gt;\n    \t  &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" \n            title=\"Month of the Year\"\/&gt;\n    \t  &lt;apex:lineSeries axis=\"left\" fill=\"true\" xField=\"name\" yField=\"data1\"\n        \t  markerType=\"cross\" markerSize=\"4\" markerFill=\"#FF0000\"\/&gt;\n    \t  &lt;apex:lineSeries axis=\"left\" xField=\"name\" yField=\"data2\" \n            markerType=\"circle\" markerSize=\"4\" markerFill=\"#8E35EF\"\/&gt;\n        &lt;apex:barSeries orientation=\"vertical\" axis=\"right\" \n            xField=\"name\" yField=\"data3\"\/&gt;\n    &lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8bf7\u6ce8\u610f\u4ee5\u4e0b\u51e0\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8981\u6dfb\u52a0\u5177\u6709\u65b0\u5ea6\u91cf\u5355\u4f4d\u7684\u6570\u636e\u7cfb\u5217\uff0c\u60a8\u9700\u8981\u6dfb\u52a0 \u56fe\u8868\u53f3\u4fa7\u7684\u7b2c\u4e8c\u4e2a\u5782\u76f4\u8f74\u3002<\/li>\n\n\n\n<li>\u60a8\u6700\u591a\u53ef\u4ee5\u6709\u56db\u4e2a\u4e0d\u540c\u7684\u8f74\uff0c\u6bcf\u4e2a\u8f74\u5bf9\u5e94\u4e00\u4e2a\u8fb9 \u56fe\u8868\u3002<\/li>\n\n\n\n<li>\u6761\u5f62\u56fe\u8bbe\u7f6e\u4e3a\u5782\u76f4\u65b9\u5411\uff0c\u5e76\u7ed1\u5b9a\u5230 \u53f3\u8f74\u3002\u5c06\u6c34\u5e73\u6761\u5f62\u56fe\u7ed1\u5b9a\u5230\u4e0a\u8f74\u6216\u4e0b\u8f74\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u6dfb\u52a0\u56fe\u4f8b\u3001\u6807\u7b7e\u3001 \u548c\u56fe\u8868\u63d0\u793a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u60a8\u53ef\u4ee5\u63d0\u9ad8 \u901a\u8fc7\u6dfb\u52a0\u56fe\u8868\u56fe\u4f8b\u3001\u7cfb\u5217\u6807\u7b7e\u5e76\u786e\u4fdd \u56fe\u8868\u6807\u7b7e\u662f\u53ef\u8bfb\u7684\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"695\" height=\"397\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar2.png\" alt=\"\" class=\"wp-image-4105\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar2.png 695w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar2-300x171.png 300w\" sizes=\"(max-width: 695px) 100vw, 695px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"ChartController\"&gt;\n    &lt;apex:chart height=\"400\" width=\"700\" data=\"{!data}\"&gt;\n        &lt;apex:legend position=\"right\"\/&gt;\n        &lt;apex:axis type=\"Numeric\" position=\"left\" fields=\"data1\"\n            title=\"Opportunities Closed\" grid=\"true\"\/&gt;\n        &lt;apex:axis type=\"Numeric\" position=\"right\" fields=\"data3\"\n            title=\"Revenue (millions)\"\/&gt;\n        &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\"\n            title=\"Month of the Year\"&gt;\n            &lt;apex:chartLabel rotate=\"315\"\/&gt;\n        &lt;\/apex:axis&gt;\n        &lt;apex:barSeries title=\"Monthly Sales\" orientation=\"vertical\" axis=\"right\"\n            xField=\"name\" yField=\"data3\"&gt;\n            &lt;apex:chartTips height=\"20\" width=\"120\"\/&gt;\n        &lt;\/apex:barSeries&gt;\n        &lt;apex:lineSeries title=\"Closed-Won\" axis=\"left\" xField=\"name\" yField=\"data1\"\n            fill=\"true\" markerType=\"cross\" markerSize=\"4\" markerFill=\"#FF0000\"\/&gt;\n        &lt;apex:lineSeries title=\"Closed-Lost\" axis=\"left\" xField=\"name\" yField=\"data2\"\n            markerType=\"circle\" markerSize=\"4\" markerFill=\"#8E35EF\"\/&gt;\n    &lt;\/apex:chart&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8bf7\u6ce8\u610f\u4ee5\u4e0b\u6709\u5173\u6dfb\u52a0\u7684\u5185\u5bb9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u7684\u987a\u5e8f\u51b3\u5b9a\u4e86\u5206\u5c42 \u7ed8\u5236\u65f6\u7684\u56fe\u8868\u5143\u7d20\u3002\u5728\u524d\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6761\u5f62\u56fe\u4f4d\u4e8e\u524d\u53f0\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u6761\u5f62\u56fe \u5df2\u653e\u7f6e\u5728\u540e\u53f0\uff0c\u56e0\u4e3a\u7ec4\u4ef6\u5728\u4e4b\u524d \u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u3002<samp>&lt;apex:barSeries>&lt;apex:lineSeries><\/samp><\/li>\n\n\n\n<li>\u7ec4\u4ef6 \u53ef\u4ee5\u5904\u4e8e\u4ee5\u4e0b\u56db\u4e2a\u4f4d\u7f6e\u4e2d\u7684\u4efb\u4f55\u4e00\u4e2a\uff1a\u5de6\u3001\u53f3\u3001\u4e0a\u6216\u4e0b\u3002\u8fd9 \u56fe\u4f8b\u653e\u7f6e\u5728\u56fe\u8868\u7684\u8fb9\u754c\u5185;\u5728\u6b64\u793a\u4f8b\u4e2d \u56fe\u4f8b\u538b\u7f29\u4e86\u56fe\u8868\u672c\u8eab\u7684\u6c34\u5e73\u5bbd\u5ea6\u3002<samp>&lt;apex:legend&gt;<\/samp><\/li>\n\n\n\n<li>\u4f7f\u7528\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u5c5e\u6027\u6dfb\u52a0\u56fe\u4f8b\u6807\u9898\u3002<samp>title<\/samp><\/li>\n\n\n\n<li>\u8981\u65cb\u8f6c\u5e95\u90e8\u56fe\u8868\u8f74\u7684\u6807\u7b7e\uff0c\u7ec4\u4ef6\u662f \u5305\u542b\u5728\u5b83\u6240\u5f71\u54cd\u7684\u7ec4\u4ef6\u4e2d\u3002<samp>&lt;apex:chartLabel&gt;<\/samp><samp>&lt;apex:axis&gt;<\/samp><\/li>\n\n\n\n<li>\u8be5\u7ec4\u4ef6\u542f\u7528\u6eda\u52a8\u66f4\u65b0\u5de5\u5177\u63d0\u793a\uff0c\u4ee5\u63d0\u4f9b\u5176\u4ed6\u4fe1\u606f \u5173\u4e8e\u5305\u542b\u8be5\u6570\u636e\u70b9\u7684\u7cfb\u5217\u4e2d\u7684\u6bcf\u4e2a\u6570\u636e\u70b9\u3002<samp>&lt;apex:chartTips&gt;<\/samp><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u4f7f\u7528\u5237\u65b0\u7684\u6570\u636e\u66f4\u65b0\u56fe\u8868<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u7ec4\u4ef6\u4f7f\u7528\u65b0\u7684\u6216\u66f4\u65b0\u7684\u6570\u636e\u91cd\u65b0\u7ed8\u5236\u56fe\u8868\uff0c \u6216\u8005\u4f7f\u7528 JavaScript \u8fdc\u7a0b\u5904\u7406\u548c\u60a8\u81ea\u5df1\u7684 JavaScript \u4ee3\u7801\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:actionSupport&gt;<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:actionSupport&gt;<\/samp>\u5141\u8bb8\u60a8\u4ec5\u4f7f\u7528 Visualforce \u66f4\u65b0\u56fe\u8868\u3002JavaScript \u8fdc\u7a0b\u5904\u7406\u9700\u8981\u60a8\u7f16\u5199\u4e00\u4e9b JavaScript \u4ee3\u7801\uff0c\u4f46\u63d0\u4f9b\u4e86\u66f4\u591a \u7075\u6d3b\u6027\u548c\u66f4\u5e73\u6ed1\u7684\u8fc7\u6e21\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 &lt;apex\uff1aactionSupport> \u5237\u65b0\u56fe\u8868\u6570\u636e \u901a\u8fc7\u5c06\u7ec4\u4ef6\u6dfb\u52a0\u5230\u5f71\u54cd\u56fe\u8868\u6570\u636e\u7684 Visualforce \u7528\u6237\u754c\u9762\u5143\u7d20\u4e2d\uff0c<br>\u66f4\u65b0\u8be5\u56fe\u8868\u4ee5\u54cd\u5e94\u7528\u6237\u7684\u64cd\u4f5c\u3002<samp>&lt;apex:actionSupport><\/samp><\/li>\n\n\n\n<li>\u4f7f\u7528 JavaScript\u00a0Remoting<br>\u5237\u65b0\u56fe\u8868\u6570\u636e \u4f7f\u7528\u81ea\u5b9a\u4e49 JavaScript \u5b9a\u671f\u66f4\u65b0 Visualforce \u56fe\u8868\uff0c\u6216\u54cd\u5e94\u7528\u6237\u7684\u64cd\u4f5c\u3002JavaScript \u4ee3\u7801\u53ef\u4ee5\u54cd\u5e94\u590d\u6742\u7684\u7528\u6237\u6d3b\u52a8\u6216\u8ba1\u65f6\u5668\u4e8b\u4ef6\uff0c\u5e76\u5728\u9700\u8981\u65f6\u4f7f\u7528 JavaScript \u8fdc\u7a0b\u5904\u7406\u6765\u68c0\u7d22\u65b0\u7684\u56fe\u8868\u6570\u636e\u3002<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u4f7f\u7528&nbsp;&lt;apex\uff1aactionSupport&nbsp;\u5237\u65b0\u56fe\u8868\u6570\u636e&gt;<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u66f4\u65b0 Visualforce \u56fe\u8868 \u901a\u8fc7\u5c06\u7ec4\u4ef6\u6dfb\u52a0\u5230 Visualforce \u7528\u6237\u754c\u9762\u5143\u7d20\u6765\u54cd\u5e94\u7528\u6237\u7684\u64cd\u4f5c \u8fd9\u4f1a\u5f71\u54cd\u56fe\u8868\u7684\u6570\u636e\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:actionSupport&gt;<\/samp>\u4ee5\u4e0b\u6807\u8bb0\u663e\u793a\u4e00\u4e2a\u997c\u56fe\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u66f4\u65b0 \u4ece\u56fe\u8868\u65c1\u8fb9\u7684\u83dc\u5355\u4e2d\u9009\u62e9\u65b0\u5e74\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"PieChartRemoteController\"&gt;\n    &lt;apex:pageBlock title=\"Charts\"&gt;\n\n        &lt;apex:pageBlockSection title=\"Standard Visualforce Charting\"&gt;\n\n            &lt;apex:outputPanel id=\"theChart\"&gt;\n            &lt;apex:chart height=\"350\" width=\"450\" data=\"{!pieData}\"&gt;\n                &lt;apex:pieSeries dataField=\"data\" labelField=\"name\"\/&gt;\n                &lt;apex:legend position=\"right\"\/&gt;\n            &lt;\/apex:chart&gt;\n            &lt;\/apex:outputPanel&gt;\n            \n            &lt;apex:form&gt;\n                &lt;apex:selectList value=\"{!chartYear}\" size=\"1\"&gt;\n                    &lt;apex:selectOptions value=\"{!chartYearOptions}\"\/&gt;\n                    &lt;apex:actionSupport event=\"onchange\" reRender=\"theChart\" \n                        status=\"actionStatusDisplay\"\/&gt;\n                &lt;\/apex:selectList&gt;\n                &lt;apex:actionStatus id=\"actionStatusDisplay\"\n                    startText=\"loading...\" stopText=\"\"\/&gt;\n            &lt;\/apex:form&gt;\n            \n        &lt;\/apex:pageBlockSection&gt;\n        \n    &lt;\/apex:pageBlock&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u6807\u8bb0\u901a\u8fc7\u5c06\u56fe\u8868\u7684\u5c5e\u6027\u8bbe\u7f6e\u4e3a Visualforce \u8868\u8fbe\u5f0f\uff0c\u5c06\u56fe\u8868\u7ec4\u4ef6\u9644\u52a0\u5230\u5176\u6570\u636e\u6e90\u3002\u8be5\u8868\u8fbe\u5f0f\u8c03\u7528\u63a7\u5236\u5668\u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u8fd4\u56de \u6570\u636e\u3002\u8be5\u56fe\u8868\u5305\u88c5\u5728\u5c5e\u6027\u4e3a \u7684 \u4e2d\u3002<samp>data<\/samp><samp>{!pieData}<\/samp><samp>getPieData()<\/samp><samp>&lt;apex:outputPanel&gt;<\/samp><samp>id<\/samp><samp>theChart<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7ec4\u4ef6\u7528\u4e8e\u63d0\u4ea4\u65b0\u5e74\u4efd \u5f53\u56fe\u8868\u9700\u8981\u66f4\u65b0\u65f6\uff0c\u8fd4\u56de\u5230\u9875\u9762\u7684\u63a7\u5236\u5668\u3002\u6807\u7b7e\u663e\u793a\u5e74\u4efd \u53ef\u7528\u4e8e\u56fe\u8868\uff0c\u5e76\u4e14\u6bcf\u5f53\u83dc\u5355\u66f4\u6539\u65f6\uff0c\u5b50\u6807\u8bb0\u90fd\u4f1a\u63d0\u4ea4\u8868\u5355\u3002 \u56fe\u8868\u7684 \uff0c \uff0c \u5728\u5c5e\u6027\u4e2d\u4f7f\u7528\uff0c\u4ee5\u9650\u5236\u66f4\u65b0\u5230 \u56fe\u8868\uff0c\u800c\u4e0d\u662f\u91cd\u65b0\u52a0\u8f7d\u6574\u4e2a\u9875\u9762\u3002\u6700\u540e\uff0c\u7ec4\u4ef6\u5728\u56fe\u8868\u65f6\u63d0\u4f9b\u72b6\u6001\u6d88\u606f \u4ee4\u4eba\u8033\u76ee\u4e00\u65b0\u3002\u5f88\u5bb9\u6613\u5c06\u6700\u5c0f\u7684\u6587\u672c\u6d88\u606f\u66ff\u6362\u4e3a\u52a8\u753b\u56fe\u5f62\u6216 \u6587\u672c\u6548\u679c\u3002<samp>&lt;apex:form&gt;<\/samp><samp>&lt;apex:selectList&gt;<\/samp><samp>&lt;apex:actionSupport&gt;<\/samp><samp>id<\/samp><samp>&lt;apex:outputPanel&gt;<\/samp><samp>theChart<\/samp><samp>&lt;apex:actionSupport&gt;<\/samp><samp>reRender<\/samp><samp>&lt;apex:actionStatus&gt;<\/samp><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PieChartRemote\u63a7\u5236\u5668<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u9875\u9762\u7684\u63a7\u5236\u5668\u662f\u997c\u56fe\u7684\u6269\u5c55 \u63a7\u5236\u5668\u5728\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u8868\u793a\u4f8b\u4e2d\u4f7f\u7528\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class PieChartRemoteController {\n\n    \/\/ The year to be charted\n    public String chartYear { \n        get {\n            if (chartYear == Null) chartYear = '2013';\n            return chartYear;\n        }\n        set;\n    }\n    \n    \/\/ Years available to be charted, for &lt;apex:selectList&gt;\n    public static List&lt;SelectOption&gt; getChartYearOptions() {\n        List&lt;SelectOption&gt; years = new List&lt;SelectOption&gt;();\n        years.add(new SelectOption('2013','2013'));\n        years.add(new SelectOption('2012','2012'));\n        years.add(new SelectOption('2011','2011'));\n        years.add(new SelectOption('2010','2010'));\n        return years;\n    }\n    \n    public List&lt;PieWedgeData&gt; getPieData() {\n        \/\/ Visualforce expressions can't pass parameters, so get from property\n        return PieChartRemoteController.generatePieData(this.chartYear);\n    }\n    \n    @RemoteAction\n    public static List&lt;PieWedgeData&gt; getRemotePieData(String year) {\n        \/\/ Remoting calls can send parameters with the call\n        return PieChartRemoteController.generatePieData(year);\n    }\n\n    \/\/ Private data \"generator\"\n    private static List&lt;PieWedgeData&gt; generatePieData(String year) {\n        List&lt;PieWedgeData&gt; data = new List&lt;PieWedgeData&gt;();\n        if(year.equals('2013')) {\n            \/\/ These numbers are absolute quantities, not percentages\n            \/\/ The chart component will calculate the percentages\n            data.add(new PieWedgeData('Jan', 30));\n            data.add(new PieWedgeData('Feb', 15));\n            data.add(new PieWedgeData('Mar', 10));\n            data.add(new PieWedgeData('Apr', 20));\n            data.add(new PieWedgeData('May', 20));\n            data.add(new PieWedgeData('Jun',  5));\n        }\n        else {\n            data.add(new PieWedgeData('Jan', 20));\n            data.add(new PieWedgeData('Feb', 35));\n            data.add(new PieWedgeData('Mar', 30));\n            data.add(new PieWedgeData('Apr', 40));\n            data.add(new PieWedgeData('May',  5));\n            data.add(new PieWedgeData('Jun', 10));\n        }\n        return data;\n    }\n\n    \/\/ Wrapper class\n    public class PieWedgeData {\n\n        public String name { get; set; }\n        public Integer data { get; set; }\n\n        public PieWedgeData(String name, Integer data) {\n            this.name = name;\n            this.data = data;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u63a7\u5236\u5668\u652f\u6301\u4ee5\u4e24\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\u5411 Visualforce \u56fe\u8868\u63d0\u4f9b\u6570\u636e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 Visualforce \u8868\u8fbe\u5f0f\u3001 \u3001 \u8c03\u7528\u5b9e\u4f8b\u65b9\u6cd5\u3002<samp>{!pieData}<\/samp><samp>getPieData()<\/samp><\/li>\n\n\n\n<li>\u4f7f\u7528 JavaScript \u8fdc\u7a0b\u5904\u7406\uff0c\u4ece JavaScript \u65b9\u6cd5\u8c03\u7528\u9759\u6001\u65b9\u6cd5\u3002<samp>@RemoteAction<\/samp><samp>getRemotePieData()<\/samp><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u4f7f\u7528 JavaScript Remoting \u5237\u65b0\u56fe\u8868\u6570\u636e<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9a\u671f\u66f4\u65b0 Visualforce \u56fe\u8868\uff0c\u6216\u4f7f\u7528 \u81ea\u5b9a\u4e49 JavaScript\u3002JavaScript \u4ee3\u7801\u53ef\u4ee5\u54cd\u5e94\u590d\u6742\u7684\u7528\u6237\u6d3b\u52a8 \u6216\u8ba1\u65f6\u5668\u4e8b\u4ef6\uff0c\u5e76\u5728\u9700\u8981\u65f6\u4f7f\u7528 JavaScript \u8fdc\u7a0b\u5904\u7406\u68c0\u7d22\u65b0\u7684\u56fe\u8868\u6570\u636e\u3002\u4ee5\u4e0b\u6807\u8bb0\u663e\u793a\u4e00\u4e2a\u997c\u56fe\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u66f4\u65b0 \u4ece\u56fe\u8868\u65c1\u8fb9\u7684\u83dc\u5355\u4e2d\u9009\u62e9\u65b0\u5e74\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page controller=\"PieChartRemoteController\"&gt;\n    &lt;script&gt;\n    function retrieveChartData(callback) {\n       var year = document.getElementById('theYear').value;\n       Visualforce.remoting.Manager.invokeAction(\n           '{!$RemoteAction.PieChartRemoteController.getRemotePieData}',\n           year,\n           function(result, event) {\n               if(event.status &amp;&amp; result &amp;&amp; (result.constructor === Array)) {\n                   callback(result);\n                   RemotingPieChart.show();\n               }\n               else if (event.type === 'exception') {\n                   document.getElementById(\"remoteResponseErrors\").innerHTML = event.message + \n                       '&lt;br\/&gt;' + event.where;\n               }\n               else {\n                   document.getElementById(\"remoteResponseErrors\").innerHTML = event.message;\n               }                   \n           },\n           { escape: true }\n       );\n    }\n    function refreshRemoteChart() {\n        var statusElement = document.getElementById('statusDisplay');\n        statusElement.innerHTML = \"loading...\";\n        retrieveChartData(function(statusElement){\n                return function(data){\n                    RemotingPieChart.reload(data);\n                    statusElement.innerHTML = '';\n                };\n            }(statusElement)\n        );\n    }\n    &lt;\/script&gt;\n\n    &lt;apex:pageBlock title=\"Charts\"&gt;\n\n        &lt;apex:pageBlockSection title=\"Visualforce Charting + JavaScript Remoting\"&gt;\n\n            &lt;apex:chart height=\"350\" width=\"450\" data=\"retrieveChartData\" \n                name=\"RemotingPieChart\" hidden=\"true\"&gt;\n                &lt;apex:pieSeries dataField=\"data\" labelField=\"name\"\/&gt;\n                &lt;apex:legend position=\"right\"\/&gt;\n            &lt;\/apex:chart&gt;\n            \n            &lt;div&gt;\n                &lt;select id=\"theYear\" onChange=\"refreshRemoteChart();\"&gt;\n                    &lt;option value=\"2013\"&gt;2013&lt;\/option&gt;\n                    &lt;option value=\"2012\"&gt;2012&lt;\/option&gt;\n                    &lt;option value=\"2011\"&gt;2011&lt;\/option&gt;\n                    &lt;option value=\"2010\"&gt;2010&lt;\/option&gt;\n                &lt;\/select&gt;\n                &lt;span id=\"statusDisplay\"&gt;&lt;\/span&gt;\n                &lt;span id=\"remoteResponseErrors\"&gt;&lt;\/span&gt;\n            &lt;\/div&gt;\n\n        &lt;\/apex:pageBlockSection&gt;\n\n    &lt;\/apex:pageBlock&gt;\n&lt;\/apex:page&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u6807\u8bb0\u901a\u8fc7\u8bbe\u7f6e \u56fe\u8868\u7684\u5c5e\u6027 \u66f4\u6539\u4e3a\u8fd4\u56de\u6570\u636e\u7684 JavaScript \u51fd\u6570\u7684\u540d\u79f0\u3002\u7684\u540d\u79f0 \u51fd\u6570\u4ee5\u5b57\u7b26\u4e32\u5f62\u5f0f\u63d0\u4f9b\u3002<samp>data<\/samp><samp>retrieveChartData<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9759\u6001 HTML \u83dc\u5355 \u663e\u793a\u53ef\u7528\u4e8e\u56fe\u8868\u7684\u5e74\u4efd\u3002\u83dc\u5355\u672a\u5173\u8054 \u5177\u6709\u4efb\u4f55\u7c7b\u578b\u7684\u8868\u5355\u5143\u7d20\uff0c\u5e76\u4e14\u4ece\u4e0d\u63d0\u4ea4\u5176\u503c \u76f4\u63a5\u8fd4\u56de\u63a7\u5236\u5668\u3002\u76f8\u53cd\uff0c\u6bcf\u5f53\u83dc\u5355\u53d1\u751f\u66f4\u6539\u65f6\uff0c\u83dc\u5355\u7684\u5c5e\u6027\u90fd\u4f1a\u8c03\u7528 JavaScript \u51fd\u6570 \u3002\u6709 \u4e24\u4e2a\u989d\u5916\u7684\u9759\u6001 HTML \u5143\u7d20\uff1a\u4e24\u4e2a\u5e26\u6709 ID \u7684\u6807\u7b7e\u3002\u5f53\u9875\u9762\u52a0\u8f7d\u65f6\uff0c\u6807\u8bb0\u4e3a\u7a7a\uff0c\u5e76\u4f1a\u66f4\u65b0 \u901a\u8fc7 JavaScript \u5728\u5fc5\u8981\u65f6\u663e\u793a\u72b6\u6001\u548c\u9519\u8bef\u6d88\u606f\u3002<samp>&lt;select&gt;<\/samp><samp>&lt;select&gt;<\/samp><samp>onChange<\/samp><samp>refreshRemoteChart()<\/samp><samp>&lt;span&gt;<\/samp><samp>&lt;span&gt;<\/samp>Visualforce \u6807\u8bb0\u524d\u9762\u7684\u4e24\u4e2a JavaScript \u51fd\u6570\u662f Visualforce \u56fe\u8868\u548c\u63d0\u4f9b\u6570\u636e\u7684\u63a7\u5236\u5668\u65b9\u6cd5\u4e4b\u95f4\u7684\u7c98\u5408\u5242\u3002\u6709\u4e09\u4e2a\u73af\u8282 \u5728\u51fd\u6570\u548c\u56fe\u8868\u7ec4\u4ef6\u4e4b\u95f4\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>@RemoteAction<\/samp><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u56fe\u8868\u7ec4\u4ef6\u7684\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u201cretrieveChartData\u201d\uff0c\u5373\u540d\u79f0 \u7684\u7b2c\u4e00\u4e2a JavaScript \u51fd\u6570\u3002\u8fd9\u4f1a\u544a\u8bc9\u56fe\u8868\u7ec4\u4ef6 \u4f7f\u7528 JavaScript \u51fd\u6570\u52a0\u8f7d\u5176\u6570\u636e\u3002\u56fe\u8868\u7ec4\u4ef6&nbsp;<strong>\u4ec5\u76f4\u63a5<\/strong>\u8c03\u7528\u4e00\u6b21\uff0c\u5f53\u9996\u6b21\u521b\u5efa\u56fe\u8868\u65f6\uff0c\u5e76\u4e14 \u6700\u521d\u52a0\u8f7d\u6570\u636e\u3002<samp>data<\/samp><samp>retrieveChartData()<\/samp><\/li>\n\n\n\n<li>\u5f53\u8c03\u7528\u7b2c\u4e8c\u4e2a JavaScript \u51fd\u6570 \u65f6\uff0c\u5c06\u53d1\u751f\u91cd\u65b0\u52a0\u8f7d\u3002 \u8fd9\u662f\u83dc\u5355\u4e2d\u7684\u7b2c\u4e8c\u4e2a\u94fe\u63a5\u3002\u5f53\u5e74\u4efd\u83dc\u5355\u66f4\u6539\u65f6\uff0c\u5c06\u8c03\u7528\u8be5\u83dc\u5355\uff0c\u5e76\u91cd\u65b0\u8c03\u7528\u51fd\u6570\u4ee5\u52a0\u8f7d \u4e00\u7ec4\u65b0\u6570\u636e\u3002<samp>refreshRemoteChart()<\/samp><samp>theYear<\/samp><samp>refreshRemoteChart()<\/samp><samp>retrieveChartData()<\/samp><\/li>\n\n\n\n<li>\u8c03\u7528\u65f6\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u533f\u540d\u51fd\u6570\u4f5c\u4e3a\u56de\u8c03\uff0c\u8be5\u51fd\u6570\u5904\u7406 \u8fd4\u56de\u65f6\u8c03\u7528\u7684\u7ed3\u679c\u3002\u6b64\u56de\u8c03\u901a\u8fc7\u8c03\u7528 \u6765\u66f4\u65b0\u56fe\u8868\u3002\u8fd9 chart \u672c\u8eab\u662f\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027\u6765\u547d\u540d\u7684\uff0c\u5e76\u4e14\u662f Visualforce \u56fe\u8868\u521b\u5efa\u540e\u53ef\u7528\u7684 JavaScript \u51fd\u6570\uff0c\u5b83\u63a5\u53d7\u65b0\u6570\u636e\uff0c\u7136\u540e\u91cd\u65b0\u7ed8\u5236 \u56fe\u8868\u3002<samp>refreshRemoteChart()<\/samp><samp>retrieveChartData()<\/samp><samp>@RemoteAction<\/samp><samp>RemotingPieChart.reload(data)<\/samp><samp>RemotingPieChart<\/samp><samp>name<\/samp><samp>reload()<\/samp><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u56fe\u8bf4\u660e\u4e86\u4e0d\u540c\u7ec4\u4ef6\u4e4b\u95f4\u7684\u8fd9\u4e9b\u94fe\u63a5 \u7684\u9875\u9762\uff1a<img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"338\" class=\"wp-image-4106\" style=\"\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/er.png\" alt=\"\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/er.png 470w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/er-300x216.png 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u56fe\u8868\u521d\u59cb\u52a0\u8f7d\u7684\u987a\u5e8f\u5f88\u7b80\u5355\uff1a\u547d\u540d\u8c03\u7528\u4ee5\u83b7\u53d6\u5176\u521d\u59cb data\uff0c\u5e76\u5728\u6709\u6570\u636e\u65f6\u8c03\u7528\u3002\u7136\u540e\uff0c\u56fe\u8868\u968f\u5373\u51fa\u73b0\u3002<samp>&lt;apex:chart&gt;<\/samp><samp>RemotePieChart<\/samp><samp>retrieveChartData()<\/samp><samp>retrieveChartData()<\/samp><samp>RemotePieChart.show()<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u66f4\u65b0\u66f4\u4e3a\u590d\u6742\u3002\u4ece\u83dc\u5355\u4e2d\u9009\u62e9\u65b0\u5e74\u4efd\u65f6\uff0c\u5c06\u89e6\u53d1\u83dc\u5355\u7684\u4e8b\u4ef6\uff0c\u8be5\u4e8b\u4ef6\u5c06\u8c03\u7528\u8be5\u51fd\u6570\u3002 \u4f9d\u6b21\u8c03\u7528 \u51fd\u6570\uff0c \u5f53\u8fd4\u56de\u65b0\u6570\u636e\u65f6\uff0c\uff08\u901a\u8fc7 \u63d0\u4f9b\u7684\u56de\u8c03 \uff09 \u8c03\u7528 \u3002\u800c\u4e14\uff0c\u56fe\u8868\u4f1a\u66f4\u65b0\u3002<samp>theYear<\/samp><samp>onChange<\/samp><samp>refreshRemoteChart()<\/samp><samp>refreshRemoteChart()<\/samp><samp>retrieveChartData()<\/samp><samp>@RemoteAction<\/samp><samp>retrieveChartData()<\/samp><samp>refreshRemoteChart()<\/samp><samp>RemotePieChart.reload()<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u662f\u5176\u4ed6\u4e00\u4e9b\u9700\u8981\u6ce8\u610f\u7684\u4e8b\u9879\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7528\u9014 \u5c5e\u6027 \u8981\u9632\u6b62\u56fe\u8868\u5728\u6709\u6570\u636e\u4e4b\u524d\u663e\u793a\uff0c\u8bf7 \u663e\u793a\u3002\u52a0\u8f7d\u56fe\u8868\u6570\u636e\u540e\uff0c\u8be5\u51fd\u6570\u5c06\u8c03\u7528\u4ee5\u663e\u793a\u56fe\u8868\u3002\u8fd9\u548c\u63d0\u4f9b \u5bf9\u4e8e\u6bd4\u4f7f\u7528 \u5b9e\u73b0\u7684\u56fe\u8868\u52a8\u753b\u66f4\u5e73\u6ed1\u3002<samp>&lt;apex:chart&gt;<\/samp><samp>hidden=&#8221;true&#8221;<\/samp><samp>retrieveChartData()<\/samp><samp>RemotingPieChart.show()<\/samp><samp>RemotingPieChart.reload()<\/samp><samp>&lt;apex:actionSupport&gt;<\/samp><\/li>\n\n\n\n<li>\u8be5\u51fd\u6570\u5c06 HTML \u8bbe\u7f6e\u4e3a\u201cloading&#8230;\u201d \u6d88\u606f\uff0c\u7136\u540e\u901a\u8fc7\u8c03\u7528 \u66f4\u65b0\u6570\u636e\uff0c\u7136\u540e \u533f\u540d\u56de\u8c03\u51fd\u6570\u5c06\u5176\u8bbe\u7f6e\u4e3a\u7a7a\u5b57\u7b26\u4e32\u4ee5\u9690\u85cf \u8fd4\u56de\u6570\u636e\u5e76\u66f4\u65b0\u56fe\u8868\u540e\u7684\u6d88\u606f\u3002\u5b83 \u6bd4\u4f7f\u7528\u591a\u4e00\u70b9\u5de5\u4f5c\uff0c\u6548\u679c\u57fa\u672c\u76f8\u540c\u3002\u60a8\u53ef\u4ee5\u8f7b\u677e\u663e\u793a\u201c\u5fd9\u788c\u201d \u4f7f\u7528\u76f8\u540c\u6280\u672f\u7684\u52a8\u753b\u6216\u56fe\u5f62\u3002<samp>refreshRemoteData()<\/samp><samp>statusElement<\/samp><samp>&lt;span&gt;<\/samp><samp>retrieveChartData()<\/samp><samp>&lt;apex:actionStatus&gt;<\/samp><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">PieChartRemote\u63a7\u5236\u5668<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u9875\u9762\u7684\u63a7\u5236\u5668\u662f\u997c\u56fe\u7684\u6269\u5c55 \u63a7\u5236\u5668\u5728\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u8868\u793a\u4f8b\u4e2d\u4f7f\u7528\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class PieChartRemoteController {\n\n    \/\/ The year to be charted\n    public String chartYear { \n        get {\n            if (chartYear == Null) chartYear = '2013';\n            return chartYear;\n        }\n        set;\n    }\n    \n    \/\/ Years available to be charted, for &lt;apex:selectList&gt;\n    public static List&lt;SelectOption&gt; getChartYearOptions() {\n        List&lt;SelectOption&gt; years = new List&lt;SelectOption&gt;();\n        years.add(new SelectOption('2013','2013'));\n        years.add(new SelectOption('2012','2012'));\n        years.add(new SelectOption('2011','2011'));\n        years.add(new SelectOption('2010','2010'));\n        return years;\n    }\n    \n    public List&lt;PieWedgeData&gt; getPieData() {\n        \/\/ Visualforce expressions can't pass parameters, so get from property\n        return PieChartRemoteController.generatePieData(this.chartYear);\n    }\n    \n    @RemoteAction\n    public static List&lt;PieWedgeData&gt; getRemotePieData(String year) {\n        \/\/ Remoting calls can send parameters with the call\n        return PieChartRemoteController.generatePieData(year);\n    }\n\n    \/\/ Private data \"generator\"\n    private static List&lt;PieWedgeData&gt; generatePieData(String year) {\n        List&lt;PieWedgeData&gt; data = new List&lt;PieWedgeData&gt;();\n        if(year.equals('2013')) {\n            \/\/ These numbers are absolute quantities, not percentages\n            \/\/ The chart component will calculate the percentages\n            data.add(new PieWedgeData('Jan', 30));\n            data.add(new PieWedgeData('Feb', 15));\n            data.add(new PieWedgeData('Mar', 10));\n            data.add(new PieWedgeData('Apr', 20));\n            data.add(new PieWedgeData('May', 20));\n            data.add(new PieWedgeData('Jun',  5));\n        }\n        else {\n            data.add(new PieWedgeData('Jan', 20));\n            data.add(new PieWedgeData('Feb', 35));\n            data.add(new PieWedgeData('Mar', 30));\n            data.add(new PieWedgeData('Apr', 40));\n            data.add(new PieWedgeData('May',  5));\n            data.add(new PieWedgeData('Jun', 10));\n        }\n        return data;\n    }\n\n    \/\/ Wrapper class\n    public class PieWedgeData {\n\n        public String name { get; set; }\n        public Integer data { get; set; }\n\n        public PieWedgeData(String name, Integer data) {\n            this.name = name;\n            this.data = data;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u63a7\u5236\u5668\u652f\u6301\u4ee5\u4e24\u79cd\u4e0d\u540c\u7684\u65b9\u5f0f\u5411 Visualforce \u56fe\u8868\u63d0\u4f9b\u6570\u636e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 Visualforce \u8868\u8fbe\u5f0f\u3001 \u3001 \u8c03\u7528\u5b9e\u4f8b\u65b9\u6cd5\u3002<samp>{!pieData}<\/samp><samp>getPieData()<\/samp><\/li>\n\n\n\n<li>\u4f7f\u7528 JavaScript \u8fdc\u7a0b\u5904\u7406\uff0c\u4ece JavaScript \u65b9\u6cd5\u8c03\u7528\u9759\u6001\u65b9\u6cd5\u3002<samp>@RemoteAction<\/samp><samp>getRemotePieData()<\/samp><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">\u63a7\u5236\u56fe\u8868\u7684\u5916\u89c2<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Visualforce \u56fe\u8868\u662f\u9ad8\u5ea6\u53ef\u5b9a\u5236\u7684\u3002\u60a8\u53ef\u4ee5\u7ec4\u5408\u5404\u79cd\u7c7b\u578b\u7684 \u6570\u636e\u7cfb\u5217\uff0c\u63a7\u5236\u56fe\u8868\u4e2d\u5927\u591a\u6570\u5143\u7d20\u7684\u989c\u8272\uff0c\u5e76\u63a7\u5236 \u6807\u8bb0\u3001\u7ebf\u6761\u7b49\u7684\u5916\u89c2\u3002\u60a8\u53ef\u4ee5\u81ea\u5b9a\u4e49\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6570\u636e\u7cfb\u5217\u5143\u7d20\u7684\u7ebf\u6761\u548c\u586b\u5145\u989c\u8272\u3002<\/li>\n\n\n\n<li>\u586b\u5145\u989c\u8272\u548c\u7ebf\u6761\u7684\u4e0d\u900f\u660e\u5ea6\u3002<\/li>\n\n\n\n<li>\u6570\u636e\u70b9\u7684\u6807\u8bb0\u5f62\u72b6\u548c\u989c\u8272\u3002<\/li>\n\n\n\n<li>\u8fde\u63a5\u7ebf\u7684\u7ebf\u5bbd\u3002<\/li>\n\n\n\n<li>\u7a81\u51fa\u663e\u793a\u6570\u636e\u5143\u7d20\u3002<\/li>\n\n\n\n<li>\u8f74\u7684\u523b\u5ea6\u7ebf\u548c\u7f51\u683c\u7ebf\u6837\u5f0f\u3002<\/li>\n\n\n\n<li>\u56fe\u4f8b\u3001\u6807\u7b7e\u548c\u201c\u5de5\u5177\u63d0\u793a\u201d\u6837\u5f0f\u7684\u53d8\u6362\u6ce8\u91ca\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u63d0\u4f9b\u6b64\u63a7\u4ef6\u7684\u8bb8\u591a\u7ec4\u4ef6\u548c\u5c5e\u6027 \u5728\u6807\u51c6\u7ec4\u4ef6\u53c2\u8003\u4e2d\u8fdb\u884c\u4e86\u8bf4\u660e\u3002\u67d0\u4e9b\u6548\u679c\u9700\u8981\u5c5e\u6027\u548c \u7ec4\u4ef6\uff0c\u5e76\u5728\u672c\u6587\u6863\u4e2d\u8fdb\u884c\u4e86\u66f4\u5b8c\u6574\u7684\u89e3\u91ca\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u56fe\u8868\u989c\u8272<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u56fe\u8868\u989c\u8272\u4e0e\u5185\u7f6e\u62a5\u544a\u7684\u989c\u8272\u76f8\u5339\u914d \u548c\u5206\u6790\u56fe\u8868\uff0c\u4ee5\u4fbf\u60a8\u53ef\u4ee5\u521b\u5efa\u89c6\u89c9\u4e0a\u4e00\u81f4\u7684\u4eea\u8868\u677f\u3002 \u5982\u679c\u8981\u521b\u5efa\u81ea\u5df1\u7684\u914d\u8272\u65b9\u6848\uff0c\u53ef\u4ee5\u81ea\u5b9a\u4e49 \u5927\u591a\u6570\u56fe\u8868\u5143\u7d20\u7684\u989c\u8272\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u63d0\u4f9b\u4e00\u7ec4\u989c\u8272\u5b9a\u4e49\u6765\u7ed8\u5236\u6570\u636e\u7cfb\u5217\u5143\u7d20 \uff08\u6761\u5f62\u56fe\u3001\u997c\u56fe\u6954\u5f62\u7b49\uff09\uff0c\u8bf7\u4f7f\u7528\u8be5\u5c5e\u6027\u3002\u8bbe\u7f6e\u4e3a\u6307\u5b9a\u8981\u7528\u4e8e\u6bcf\u4e2a\u989c\u8272\u7684\u989c\u8272 \u56fe\u8868\u4e2d\u7684\u6570\u636e\u7cfb\u5217\u3002\u5728\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e\u4ee5\u4ec5\u6307\u5b9a\u8be5\u7cfb\u5217\u7684\u989c\u8272\u3002<samp>colorSet<\/samp><samp>&lt;apex:chart&nbsp;colorSet=&#8221;&#8230;&#8221;&gt;<\/samp><samp>colorSet<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A \u662f\u4e00\u4e2a\u5b57\u7b26\u4e32 \u8fd9\u662f\u4ee5\u9017\u53f7\u5206\u9694\u7684 HTML \u6837\u5f0f\u5341\u516d\u8fdb\u5236\u989c\u8272\u5b9a\u4e49\u7684\u5217\u8868\u3002 \u4f8b\u5982\u3002\u989c\u8272\u6309\u987a\u5e8f\u4f7f\u7528\u3002\u5f53\u5230\u8fbe\u5217\u8868\u7684\u672b\u5c3e\u65f6\uff0c \u5e8f\u5217\u4ece\u5934\u5f00\u59cb\u3002<samp>colorSet<\/samp><samp>colorSet=&#8221;#0A224E,#BF381A,#A0D8F1,#E9AF32,#E07628&#8243;<\/samp>\u4e0b\u9762\u662f\u4e00\u4e2a\u997c\u56fe\uff0c\u5b83\u4f7f\u7528 \u9985\u997c\u6954\u5f62\u989c\u8272\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"319\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie2.png\" alt=\"\" class=\"wp-image-4107\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie2.png 416w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie2-300x230.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:pageBlockSection title=\"Simple colorSet Demo\"&gt;\n    &lt;apex:chart data=\"{!pieData}\" height=\"300\" width=\"400\" background=\"#F5F5F5\"&gt;\n        &lt;apex:legend position=\"left\"\/&gt;\n        &lt;apex:pieSeries labelField=\"name\" dataField=\"data1\"\n            colorSet=\"#37241E,#94B3C8,#4D4E24,#BD8025,#816A4A,#F0E68C\"\/&gt;\n    &lt;\/apex:chart&gt;\n&lt;\/apex:pageBlockSection&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u8be5\u5c5e\u6027\u53ef\u8bbe\u7f6e\u6574\u4e2a\u56fe\u8868\u7684\u80cc\u666f\u8272\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>background<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u60a8\u53ef\u4ee5\u5c06 \u9664 .\u5176\u4ed6\u8be6\u7ec6\u4fe1\u606f \u4ee5\u53ca\u7528\u4e8e\u914d\u7f6e\u5176\u4ed6\u56fe\u8868\u5143\u7d20\u989c\u8272\u7684\u66f4\u591a\u9009\u9879 \u9488\u5bf9\u7279\u5b9a\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u8fdb\u884c\u4e86\u63cf\u8ff0\u3002<samp>colorSet<\/samp><samp>&lt;apex:radarSeries&gt;<\/samp><samp>colorSet<\/samp><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u56fe\u8868\u5e03\u5c40\u548c\u6ce8\u91ca<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e3a\u4e86\u4f7f\u60a8\u7684\u56fe\u8868\u66f4\u6613\u4e8e\u7406\u89e3\uff0c\u8bf7\u6dfb\u52a0\u4e00\u4e2a\u6709\u610f\u4e49\u7684\u56fe\u4f8b \u8f74\u8303\u56f4\u548c\u6807\u7b7e\uff0c\u4ee5\u53ca\u6570\u636e\u5143\u7d20\u4e0a\u7684\u63d0\u793a\u6216\u6807\u7b7e\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6240\u6709\u56fe\u8868\u90fd\u6709\u4e00\u4e2a\u56fe\u4f8b\u3002\u8981\u9690\u542b\u9ed8\u8ba4\u56fe\u4f8b\uff0c \u8bbe\u7f6e\u3002\u63a7\u5236\u56fe\u4f8b\u7684\u4f4d\u7f6e\u548c\u56fe\u4f8b\u7684\u95f4\u8ddd \u6761\u76ee\uff0c\u5c06\u7ec4\u4ef6\u6dfb\u52a0\u5230\u56fe\u8868\u4e2d\u3002\u5c06\u56fe\u4f8b\u653e\u5728\u56db\u4e2a\u8fb9\u4e2d\u7684\u4efb\u4f55\u4e00\u4e2a\u8fb9\u4e0a \u4f7f\u7528\u8be5\u5c5e\u6027\u7684\u56fe\u8868\u3002\u4f7f\u7528\u5c5e\u6027 \u63a7\u5236\u56fe\u4f8b\u4e2d\u4f7f\u7528\u7684\u6587\u672c\u6837\u5f0f\u3002\u8be5\u5c5e\u6027\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u6307\u5b9a\u00a0CSS \u6837\u5f0f\u7684\u901f\u8bb0\u5b57\u4f53\u5c5e\u6027\u3002\u4f8b\u5982\u3002&lt;apex:chart\u00a0legend=&#8221;false&#8221;>&lt;apex:legend>positionfontfont&lt;apex:legend\u00a0position=&#8221;left&#8221;\u00a0font=&#8221;bold 24px Helvetica&#8221;\/><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9002\u5f53\u7684\u8f74\u7f29\u653e\u548c\u6807\u8bb0\u53ef\u80fd\u610f\u5473\u7740 \u96be\u4ee5\u8fa8\u8ba4\u6216\u5177\u6709\u8bef\u5bfc\u6027\u7684\u56fe\u8868\uff0c\u4ee5\u53ca\u6e05\u6670\u4e14\u6e05\u6670\u7684\u56fe\u8868 \u6709\u8bf4\u670d\u529b\u7684\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u7ec4\u4ef6\u4f1a\u6839\u636e \u5728\u5c5e\u6027\u4e2d\u8bbe\u7f6e\u7684\u6570\u636e\u5b57\u6bb5\u4e0a\u3002\u81ea\u52a8\u7f29\u653e\u786e\u4fdd\u6240\u6709\u6570\u636e\u90fd\u9002\u5408\u56fe\u8868 \u4f46\u56fe\u8868\u53ef\u80fd\u4e0d\u4f1a\u4ee5\u6709\u610f\u4e49\u7684\u6570\u5b57\u5f00\u5934\u6216\u7ed3\u5c3e\u3002\u7528 \u548c\u5c5e\u6027\u6765\u8986\u76d6 \u81ea\u52a8\u7f29\u653e\u3002\u82e5\u8981\u8bbe\u7f6e\u523b\u5ea6\u7ebf\u7684\u95f4\u9694\uff0c\u8bf7\u4f7f\u7528\u8be5\u5c5e\u6027\u3002\u6b64\u5c5e\u6027\u662f \u4e00\u4e2a\u6574\u6570\uff0c\u6307\u5b9a\u4e24\u7aef\u4e4b\u95f4\u7684\u6b65\u6570 \u7684\u8f74\u3002\u4f7f\u7528 \u3001 \u548c \u5c5e\u6027\u6dfb\u52a0\u884c\u6216 \u56fe\u8868\u7684\u9634\u5f71\uff0c\u4ee5\u4fbf\u66f4\u8f7b\u677e\u5730\u5c06\u6d4b\u91cf\u503c\u4e0e \u89c4\u6a21\u3002<samp>&lt;apex:axis&nbsp;type=&#8221;Numeric&#8221;&gt;<\/samp><samp>fields<\/samp><samp>minimum<\/samp><samp>maximum<\/samp><samp>steps<\/samp><samp>dashSize<\/samp><samp>grid<\/samp><samp>gridFill<\/samp>\u60a8\u53ef\u4ee5\u5c06\u56fe\u8868\u6807\u7b7e\u5e94\u7528\u4e8e\u5750\u6807\u533a\u548c\u6570\u636e\u5e8f\u5217\u3002\u5f53 \u662f \u7684\u5b50\u9879\u65f6\uff0c\u5c06\u7ed8\u5236\u6807\u7b7e \u5728\u8f74\u7684\u5916\u4fa7\u3002\u5f53\u662f\u6570\u636e\u7cfb\u5217\u7ec4\u4ef6\u7684\u5b50\u7ec4\u4ef6\u65f6\uff0c\u6807\u7b7e\u5c06\u7ed8\u5236\u5728 \u6216 \u9760\u8fd1\u56fe\u8868\u4e0a\u7684\u6570\u636e\u5143\u7d20\u3002\u4f7f\u7528\u5c5e\u6027\u8bbe\u7f6e \u6807\u7b7e\u3002\u4f7f\u7528\u8be5\u5c5e\u6027\u8bbe\u7f6e\u6807\u7b7e\u7684\u7ed8\u5236\u4f4d\u7f6e\u3002\u4f7f\u7528 \u548c \u5c5e\u6027\u8c03\u6574\u6587\u672c \u7684\u6807\u7b7e\uff0c\u4f7f\u5176\u9002\u5408\u56fe\u8868\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:chartLabel&gt;<\/samp><samp>&lt;apex:axis&gt;<\/samp><samp>&lt;apex:chartLabel&gt;<\/samp><samp>field<\/samp><samp>display<\/samp><samp>orientation<\/samp><samp>rotate<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ce8\u610f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8be5\u5c5e\u6027\u4e0d\u8d77\u4f5c\u7528 \u5f53\u7ec4\u4ef6\u4e0e\u7ec4\u4ef6\u4e00\u8d77\u4f7f\u7528\u65f6\u3002<samp>orientation<\/samp><samp>&lt;apex:chartLabel&gt;<\/samp><samp>&lt;apex:pieSeries&gt;<\/samp>\u6b64\u793a\u4f8b\u56fe\u8868\u4f7f\u7528\u4e86\u5176\u4e2d\u8bb8\u591a\u7ec4\u4ef6\u548c\u5c5e\u6027 \u8981\u521b\u5efa\u6709\u610f\u4e49\u7684\u89c6\u89c9\u8bbe\u8ba1\uff0c\u8bf7\u6267\u884c\u4ee5\u4e0b\u64cd\u4f5c\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"404\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar3.png\" alt=\"\" class=\"wp-image-4108\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar3.png 515w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar3-300x235.png 300w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart data=\"{!data}\" height=\"400\" width=\"500\"&gt;\n    &lt;apex:legend position=\"left\" font=\"bold 14px Helvetica\"\/&gt;\n    &lt;apex:axis type=\"Numeric\" position=\"left\" title=\"Closed Won\" grid=\"true\"\n        fields=\"data1,data2,data3\" minimum=\"0\" maximum=\"225\" steps=\"8\" dashSize=\"2\"&gt;\n        &lt;apex:chartLabel \/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" title=\"2012\"&gt;\n        &lt;apex:chartLabel rotate=\"315\"\/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:barSeries orientation=\"vertical\" axis=\"left\" \n        xField=\"name\" yField=\"data1,data2,data3\" stacked=\"true\"\/&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">\u6761\u5f62\u56fe<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u6761\u5f62\u56fe\u662f Visualforce \u4e2d\u63d0\u4f9b\u7684\u51e0\u79cd\u7ebf\u6027\u6570\u636e\u7cfb\u5217\u56fe\u8868\u4e4b\u4e00\u3002 \u7ebf\u6027\u7cfb\u5217\u56fe\u662f\u9488\u5bf9\u6807\u51c6\u77e9\u5f62\u7f51\u683c\u7ed8\u5236\u7684\u56fe\u8868\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7ebf\u6027\u5e8f\u5217\u4e2d\u7684\u6bcf\u4e2a\u6570\u636e\u5143\u7d20\u90fd\u7531\u5750\u6807\u63cf\u8ff0\u3002\u6570\u636e\u5e8f\u5217\u5b9a\u4e49\u5982\u4f55\u5728\u7f51\u683c\u4e0a\u7ed8\u5236\u5750\u6807\u3002\u56fe\u8868\u7ed8\u5236\u62c9\u4f38\u7684\u6761\u5f62 \u5728\u539f\u70b9\u8f74\u548c\u5750\u6807\u4e4b\u95f4\u3002\u8be5\u5c5e\u6027\u786e\u5b9a\u539f\u70b9\u662f\u5426 axis \u662f\u5de6\u8f74 \uff08Y\uff09 \u6216\u5e95\u8f74 \uff08X\uff09\u3002\u4e3a\u6e90\u81ea \u56fe\u8868\u7684\u5de6\u4fa7\uff0c\u5bf9\u4e8e\u67f1\u5f62\u56fe\uff0c\u67f1\u5f62\u4ece \u56fe\u8868\u5e95\u90e8\u3002<var>X,Y<\/var><samp>&lt;apex:barSeries&gt;<\/samp><var>X,Y<\/var><samp>orientation<\/samp><samp>&lt;apex:barSeries&nbsp;orientation=&#8221;horizontal&#8221;&gt;<\/samp><samp>&lt;apex:barSeries&nbsp;orientation=&#8221;vertical&#8221;&gt;<\/samp>\u8981\u4e3a\u6bcf\u4e2a\u67f1\u7ebf\u95f4\u9694\u7ed8\u5236\u591a\u4e2a\u6570\u636e\u70b9\uff0c\u8bf7\u5c06\u67f1\u7ebf\u5206\u7ec4\u6216\u5806\u53e0\u5728 \u5355\u4e2a\u6807\u8bb0\u3002\u5355\u4e2a\u56fe\u8868\u4e2d\u7684\u591a\u4e2a\u6807\u7b7e\u7ed8\u5236 \u5f7c\u6b64\u53e0\u52a0\uff0c\u906e\u6321\u4e86\u9664\u6700\u540e\u4e00\u4e2a\u6570\u636e\u7cfb\u5217\u4e4b\u5916\u7684\u6240\u6709\u6570\u636e\u3002\u521b\u5efa\u5782\u76f4\u5217 \u56fe\u8868\u4e2d\uff0c\u5c06\u6240\u6709\u8981\u5206\u7ec4\u6216\u5806\u53e0\u7684\u5b57\u6bb5\u6dfb\u52a0\u5230\u5c5e\u6027\u4e2d\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:barSeries&gt;<\/samp><samp>&lt;apex:barSeries&gt;<\/samp><samp>yField<\/samp><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:barSeries orientation=\"vertical\" axis=\"left\" \n    xField=\"name\" yField=\"data1,data2,data3\"\/&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7531 \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6570\u636e\u5b57\u6bb5\u4e2d\u7684\u6570\u636e\u5b57\u6bb5\u5728\u56fe\u8868\u4e0a\u5206\u7ec4\u3002\u8981\u5c06\u5b83\u4eec\u5806\u53e0\u5728\u4e00\u8d77\uff0c\u8bf7\u8bbe\u7f6e .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:barSeries&gt;<\/samp><samp>stacked=&#8221;true&#8221;<\/samp><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar4-1024x401.png\" alt=\"\" class=\"wp-image-4109\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar4-1024x401.png 1024w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar4-300x118.png 300w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar4-768x301.png 768w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar4.png 1036w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u5c5e\u6027\u8c03\u6574\u95f4\u8ddd \u5728\u5206\u7ec4\u7684\u67f1\u7ebf\u4e4b\u95f4\u3002\u4f7f\u7528\u8be5\u5c5e\u6027\u53ef\u8c03\u6574\u7ec4\u4e4b\u95f4\u7684\u95f4\u8ddd\u3002\u4f7f\u7528 \u548c \u5c5e\u6027 \u8c03\u6574\u56fe\u8868\u8f74\u4e0e\u6761\u5f62\u672c\u8eab\u4e4b\u95f4\u7684\u95f4\u8ddd\u3002<samp>gutter<\/samp><samp>groupGutter<\/samp><samp>xPadding<\/samp><samp>yPadding<\/samp>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5806\u79ef\u6761\u5f62\u56fe\u6216\u5206\u7ec4\u6761\u5f62\u56fe\u7684\u56fe\u4f8b\u6807\u9898\u4f7f\u7528 \u5c5e\u6027\u3002\u5728\u524d\u9762\u7684\u793a\u4f8b\u4e2d\uff0c \u9ed8\u8ba4\u6807\u9898\u4e3a\u201cdata1\u201d\u3001\u201cdata2\u201d\u548c \u201c\u6570\u636e 3\u201d\u3002\u82e5\u8981\u4e3a\u56fe\u4f8b\u63d0\u4f9b\u66f4\u6709\u610f\u4e49\u7684\u6807\u9898\uff0c\u8bf7\u4f7f\u7528\u7ec4\u4ef6\u7684\u5c5e\u6027\u3002\u4f7f\u7528\u9017\u53f7 \u5355\u72ec\u7684\u9879\u76ee\u3002\u4f8b\u5982\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>yField<\/samp><samp>title<\/samp><samp>&lt;apex:barSeries&gt;<\/samp><samp>title=&#8221;MacDonald,Promas,Worle&#8221;<\/samp><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"407\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar5.png\" alt=\"\" class=\"wp-image-4110\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar5.png 510w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar5-300x239.png 300w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart data=\"{!data}\" height=\"400\" width=\"500\"&gt;\n    &lt;apex:legend position=\"left\"\/&gt;\n    &lt;apex:axis type=\"Numeric\" position=\"left\" title=\"Closed Won\" grid=\"true\"\n        fields=\"data1,data2,data3\" dashSize=\"2\"&gt;\n        &lt;apex:chartLabel\/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" title=\"Stacked Bars\"&gt;\n        &lt;apex:chartLabel rotate=\"315\"\/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:barSeries orientation=\"vertical\" axis=\"left\" stacked=\"true\"\n        xField=\"name\" yField=\"data1,data2,data3\" title=\"MacDonald,Promas,Worle\"\/&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">\u5176\u4ed6\u7ebf\u6027\u7cfb\u5217\u56fe<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u5176\u4ed6\u7ebf\u6027\u6570\u636e\u5e8f\u5217\u56fe\u8868\u5305\u62ec \u3001 \u548c \u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:areaSeries&gt;<\/samp><samp>&lt;apex:lineSeries&gt;<\/samp><samp>&lt;apex:scatterSeries&gt;<\/samp>\u60a8\u53ef\u4ee5\u5c06\u7ebf\u6027\u6570\u636e\u7cfb\u5217\u56fe\u8868\u7ec4\u5408\u5728\u540c\u4e00\u56fe\u5f62\u4e0a\uff0c\u4f46 \u8981\u521b\u5efa\u6709\u610f\u4e49\u7684\u56fe\u8868\uff0c\u8bf7\u8bb0\u4f4f\u4ee5\u4e0b\u51e0\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6570\u636e\u7cfb\u5217\u56fe\u8868\u6309 \u5728 Visualforce \u6807\u8bb0\u4e2d\u5b9a\u4e49\u5b83\u4eec\u3002<\/li>\n\n\n\n<li>\u9996\u5148\u5b9a\u4e49\u56fe\u8868\uff0c\u56e0\u4e3a\u5b83\u4eec\u901a\u5e38\u9700\u8981\u5728\u540e\u53f0\u8fdb\u884c\uff0c\u56e0\u4e3a \u5b83\u4eec\u4e0d\u80fd\u662f\u900f\u660e\u7684\u3002<samp>&lt;apex:barSeries&gt;<\/samp><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e9b\u7ec4\u4ef6\u7c7b\u4f3c\u4e8e\u5806\u79ef\u6761\u5f62\u56fe\uff0c\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e\u56fe\u8868 \u7ed8\u5236\u4e3a\u9634\u5f71\u533a\u57df\uff0c\u7531\u8fde\u63a5\u70b9\u7684\u7ebf\u5b9a\u4e49 \u7cfb\u5217\u800c\u4e0d\u662f\u4f5c\u4e3a\u5355\u72ec\u7684\u6761\u5f62\u3002\u4e0e\u5176\u4ed6\u6570\u636e\u5408\u5e76 series\uff0c\u8bf7\u4f7f\u7528\u5c5e\u6027 \u4f7f\u9762\u79ef\u56fe\u90e8\u5206\u900f\u660e\u3002\u8fd9<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:areaSeries&gt;<\/samp><samp>&lt;apex:areaSeries&gt;<\/samp><samp>opacity<\/samp><a><\/a><samp>opacity<\/samp>attribute \u662f\u4ecb\u4e8e 0.0 \u548c 1.0 \u4e4b\u95f4\u7684\u6d6e\u70b9\u6570\uff0c\u5176\u4e2d 0.0 \u662f\u5b8c\u5168\u900f\u660e\u7684\uff0c1.0\u662f\u5b8c\u5168\u4e0d\u900f\u660e\u7684\u3002\u8fd9\u662f \u533a\u57df\u7cfb\u5217\u4e0e\u9152\u5427\u7cfb\u5217\u76f8\u7ed3\u5408\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"409\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar6.png\" alt=\"\" class=\"wp-image-4111\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar6.png 619w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/bar6-300x198.png 300w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart height=\"400\" width=\"700\" animate=\"true\" data=\"{!data}\"&gt;\n    &lt;apex:legend position=\"left\"\/&gt;\n    &lt;apex:axis type=\"Numeric\" position=\"left\" title=\"Closed Won\" grid=\"true\"\n        fields=\"data1,data2,data3\"&gt;\n        &lt;apex:chartLabel \/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:axis type=\"Numeric\" position=\"right\" fields=\"data1\" \n        title=\"Closed Lost\" \/&gt;\n    &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" \n        title=\"Month of the Year\"&gt;\n        &lt;apex:chartLabel rotate=\"315\"\/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:areaSeries axis=\"left\" tips=\"true\" opacity=\"0.4\" \n        xField=\"name\" yField=\"data1,data2,data3\"\/&gt;\n    &lt;apex:barSeries orientation=\"vertical\" axis=\"right\" \n        xField=\"name\" yField=\"data1\"&gt;\n        &lt;apex:chartLabel display=\"insideEnd\" field=\"data1\" color=\"#333\"\/&gt;\n    &lt;\/apex:barSeries&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u9762\u79ef\u56fe\u7684\u56fe\u4f8b\u6807\u9898\u4f7f\u7528\u5b57\u6bb5\u540d\u79f0 \u5728\u5c5e\u6027\u4e2d\u3002\u5728 \u5728\u524d\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u9ed8\u8ba4\u6807\u9898\u4e3a\u201cdata1\u201d\uff0c \u201cdata2\u201d\u548c\u201cdata3\u201d\u3002\u7ed9\u4f20\u8bf4 \u66f4\u6709\u610f\u4e49\u7684\u6807\u9898\uff0c\u8bf7\u4f7f\u7528\u7ec4\u4ef6\u7684\u5c5e\u6027\u3002\u4f7f\u7528\u9017\u53f7\u5206\u9694\u9879\u76ee\u3002\u4f8b\u5982\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>yField<\/samp><samp>title<\/samp><samp>&lt;apex:areaSeries&gt;<\/samp><samp>title=&#8221;MacDonald,Promas,Worle&#8221;<\/samp><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"409\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/area.png\" alt=\"\" class=\"wp-image-4112\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/area.png 710w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/area-300x173.png 300w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart height=\"400\" width=\"700\" animate=\"true\" data=\"{!data}\"&gt;\n    &lt;apex:legend position=\"left\"\/&gt;\n    &lt;apex:axis type=\"Numeric\" position=\"left\" fields=\"data1,data2,data3\" \n        title=\"Closed Won\" grid=\"true\"&gt;\n        &lt;apex:chartLabel \/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:axis type=\"Category\" position=\"bottom\" fields=\"name\" title=\"2011\"&gt;\n        &lt;apex:chartLabel rotate=\"315\"\/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:areaSeries axis=\"left\" xField=\"name\" tips=\"true\" \n        yField=\"data1,data2,data3\" title=\"MacDonald,Picard,Worlex\"  \/&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0e\u56fe\u8868\u4e00\u6837\uff0c\u56fe\u8868\u4f7f\u7528\u7ebf\u6761\u8fde\u63a5\u4e00\u7cfb\u5217\u70b9\u3002\u60a8\u53ef\u4ee5\u586b\u5199 \u7ebf\u4e0b\u7684\u533a\u57df\u3002\u4e0e\u56fe\u8868\u4e0d\u540c\uff0c\u56fe\u8868\u4e0d\u4f1a\u5806\u53e0\u3002\u5f53\u56fe\u8868\u672a\u586b\u5145\u65f6\uff0c\u60a8\u53ef\u4ee5\u9009\u62e9\u653e\u7f6e\u591a\u4e2a\u5e8f\u5217 \u5728\u540c\u4e00\u56fe\u8868\u4e2d\u3002\u7ebf\u7cfb\u5217\u53ef\u4ee5\u663e\u793a\u6570\u636e\u70b9\u7684\u6807\u8bb0 \u60a8\u53ef\u4ee5\u5b9a\u4e49\u6807\u8bb0\u7684\u989c\u8272\u548c\u5927\u5c0f\uff0c\u4ee5\u53ca \u8fde\u63a5\u7ebf\u3002\u8fd9\u662f\u4e00\u5f20\u7ed3\u5408\u4e86\u4e09\u4e2a\u7ebf\u7cfb\u5217\u7684\u56fe\u8868\uff0c \u5176\u4e2d\u4e4b\u4e00\u5df2\u586b\u5199\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:areaSeries&gt;<\/samp><samp>&lt;apex:lineSeries&gt;<\/samp><samp>&lt;apex:areaSeries&gt;<\/samp><samp>&lt;apex:lineSeries&gt;<\/samp><samp>&lt;apex:lineSeries&gt;<\/samp><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"411\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line3.png\" alt=\"\" class=\"wp-image-4113\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line3.png 715w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/line3-300x172.png 300w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart height=\"400\" width=\"700\" animate=\"true\" legend=\"true\" data=\"{!data}\"&gt;\n    &lt;apex:legend position=\"left\"\/&gt;\n    &lt;apex:axis type=\"Numeric\" position=\"left\" title=\"Volatility\" grid=\"true\"\n        fields=\"data1,data2,data3\"&gt;\n        &lt;apex:chartLabel \/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:axis type=\"Category\" position=\"bottom\" title=\"Month\" grid=\"true\"\n        fields=\"name\"&gt;\n        &lt;apex:chartLabel \/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:lineSeries axis=\"left\" xField=\"name\" yField=\"data1\" \n        strokeColor=\"#0000FF\" strokeWidth=\"4\"\/&gt;\n    &lt;apex:lineSeries axis=\"left\" fill=\"true\" xField=\"name\" yField=\"data2\"\n        markerType=\"cross\" markerSize=\"4\" markerFill=\"#FF0000\"\/&gt;\n    &lt;apex:lineSeries axis=\"left\" xField=\"name\" yField=\"data3\" \n        markerType=\"circle\" markerSize=\"4\" markerFill=\"#8E35EF\"&gt;\n        &lt;apex:chartTips height=\"20\" width=\"120\"\/&gt;\n    &lt;\/apex:lineSeries&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ce8\u610f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u6570\u503c\u8f74\u672a\u586b\u5145\uff0c\u5219\u7ec4\u4ef6\u53ef\u80fd\u65e0\u6cd5\u6309\u9884\u671f\u586b\u5145 \u968f\u7740\u5b83\u5411\u4e0a\u548c\u5411\u53f3\u79fb\u52a8\uff0c\u6309\u987a\u5e8f\u589e\u52a0\u3002\u89e3\u51b3\u65b9\u6848\u662f \u5728\u5c06\u6570\u636e\u4f20\u9012\u5230\u56fe\u8868\u4e4b\u524d\uff0c\u624b\u52a8\u8bbe\u7f6e\u8f74\u5e76\u5bf9\u503c\u8fdb\u884c\u6392\u5e8f\u3002<samp>&lt;apex:lineSeries&gt;<\/samp><samp>type=&#8221;Category&#8221;<\/samp><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u56fe\u8868\u5c31\u50cf\u6ca1\u6709\u8fde\u63a5\u7ebf\u7684\u56fe\u8868\u3002\u901a\u8fc7\u6539\u53d8\u6807\u8bb0\u5927\u5c0f\uff0c \u7c7b\u578b\u548c\u989c\u8272\uff0c\u5f88\u5bb9\u6613\u5728 \u76f8\u540c\u7684\u56fe\u8868\u3002<samp>&lt;apex:scatterSeries&gt;<\/samp><samp>&lt;apex:lineSeries&gt;<\/samp><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u997c\u56fe<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u5bf9\u56fe\u8868\u6700\u5e38\u89c1\u7684\u81ea\u5b9a\u4e49\u662f\u989c\u8272 \u548c\u6807\u7b7e\u3002\u4f7f\u7528\u524d\u9762\u793a\u4f8b\u4e2d\u6f14\u793a\u7684\u5c5e\u6027\u548c\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>&lt;apex:pieSeries&gt;<\/samp><samp>colorSet<\/samp><samp>&lt;apex:chartLabel&gt;<\/samp>\u82e5\u8981\u521b\u5efa\u73af\u5f62\u56fe\u800c\u4e0d\u662f\u997c\u56fe\uff0c\u8bf7\u8bbe\u7f6e\u5c5e\u6027\u3002\u8be5\u5c5e\u6027\u662f\u4ecb\u4e8e 0 \u548c 100 \u8868\u793a\u5b54\u534a\u5f84\u7684\u767e\u5206\u6bd4\u3002 \u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u73af\u5f62\u56fe\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>donut<\/samp><samp>donut<\/samp><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"412\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie3.png\" alt=\"\" class=\"wp-image-4114\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie3.png 500w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/pie3-300x247.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart data=\"{!pieData}\" height=\"400\" width=\"500\" background=\"#F5F5F5\"&gt;\n    &lt;apex:legend position=\"left\"\/&gt;\n    &lt;apex:pieSeries labelField=\"name\" dataField=\"data1\" donut=\"50\"&gt;\n        &lt;apex:chartLabel display=\"middle\" orientation=\"vertical\" \n            font=\"bold 18px Helvetica\"\/&gt;\n    &lt;\/apex:pieSeries&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">\u4eea\u8868\u56fe<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eea\u8868\u56fe\u663e\u793a\u9488\u5bf9\u5b9a\u4e49\u7684\u5355\u4e2a\u6d4b\u91cf\u503c \u8f74\u6216\u523b\u5ea6\u3002\u867d\u7136\u5b83\u7ed8\u5236\u4e86\u4e00\u4e2a\u6570\u5b57\uff0c\u4f46\u4f60\u53ef\u4ee5\u6539\u53d8 \u8f74\u548c\u56fe\u8868\u989c\u8272\u6765\u4f20\u8fbe\u8be5\u6570\u5b57\u7684\u542b\u4e49\u3002\u4f7f\u7528\u6807\u8bb0\u7684 \u548c \u5c5e\u6027\u5b9a\u4e49\u8303\u56f4 \u7684\u4ef7\u503c\u89c2\u3002\u4f7f\u7528\u6807\u8bb0\u7684\u5c5e\u6027\u6765\u6307\u793a\u5f53\u524d\u503c\u662f\u597d\u503c\u8fd8\u662f\u574f\u503c\u3002\u8fd9\u662f \u6307\u793a\u6307\u6807\u5b8c\u5168\u5728\u53ef\u63a5\u53d7\u8303\u56f4\u5185\u7684\u56fe\u8868\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><samp>minimum<\/samp><samp>maximum<\/samp><samp>&lt;apex:axis&gt;<\/samp><samp>colorSet<\/samp><samp>&lt;apex:gaugeSeries&gt;<\/samp><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"263\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/gauge.png\" alt=\"\" class=\"wp-image-4115\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/gauge.png 471w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/gauge-300x168.png 300w\" sizes=\"(max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart height=\"250\" width=\"450\" animate=\"true\" data=\"{!data}\"&gt;\n    &lt;apex:axis type=\"Gauge\" position=\"gauge\" title=\"Transaction Load\"\n        minimum=\"0\" maximum=\"100\" steps=\"10\"\/&gt;\n    &lt;apex:gaugeSeries dataField=\"data1\" donut=\"50\" colorSet=\"#78c953,#ddd\"\/&gt;\n&lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ce8\u610f<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eea\u8868\u56fe\u4e0d\u652f\u6301\u56fe\u4f8b\u6216\u6807\u6ce8\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u96f7\u8fbe\u56fe<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u96f7\u8fbe\u56fe\u7c7b\u4f3c\u4e8e\u6298\u7ebf\u56fe\uff0c\u4f46\u5b83\u4eec\u4f7f\u7528\u5706\u5f62 \u8f74\u800c\u4e0d\u662f\u7ebf\u6027\u7f51\u683c\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 \u3001 \u548c \u5c5e\u6027\u8bbe\u7f6e\u6837\u5f0f\uff0c \u6807\u8bb0\u7684\u5927\u5c0f\u548c\u989c\u8272\u3002\u4f7f\u7528 and \u5c5e\u6027\u8bbe\u7f6e\u8fde\u63a5\u7ebf\u7684\u989c\u8272\u548c\u7c97\u7ec6\u3002 \uff08\u53ef\u9009\uff09\u8bbe\u7f6e\u4e3a \u586b\u5145\u8be5\u7cfb\u5217\u6240\u5305\u56f4\u7684\u533a\u57df\uff0c\u5e76\u4f7f\u5176\u900f\u660e \u5176\u4ed6\u7cfb\u5217\u4ecd\u7136\u53ef\u89c1\u3002\u8be5\u5c5e\u6027\u662f\u4ecb\u4e8e 0.0 \u548c 1.0 \u4e4b\u95f4\u7684\u6d6e\u70b9\u6570\uff0c\u5176\u4e2d 0.0 \u662f\u5b8c\u5168\u900f\u660e\u7684\uff0c1.0\u662f\u5b8c\u5168\u4e0d\u900f\u660e\u7684\u3002<samp>markerType<\/samp><samp>markerSize<\/samp><samp>markerFill<\/samp><samp>strokeColor<\/samp><samp>strokeWidth<\/samp><samp>fill=true<\/samp><samp>opacity<\/samp><samp>opacity<\/samp>\u4e0b\u9762\u662f\u4e00\u4e2a\u96f7\u8fbe\u56fe\u7684\u793a\u4f8b\uff0c\u4ee5\u53ca \u521b\u5efa\u5b83\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"552\" src=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/radar.png\" alt=\"\" class=\"wp-image-4116\" srcset=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/radar.png 689w, http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/radar-300x240.png 300w\" sizes=\"(max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:chart height=\"530\" width=\"700\" legend=\"true\" data=\"{!data}\"&gt;\n    &lt;apex:legend position=\"left\"\/&gt;\n    &lt;apex:axis type=\"Radial\" position=\"radial\"&gt;\n        &lt;apex:chartLabel \/&gt;\n    &lt;\/apex:axis&gt;\n    &lt;apex:radarSeries xField=\"name\" yField=\"data1\" tips=\"true\" opacity=\"0.4\"\/&gt;\n    &lt;apex:radarSeries xField=\"name\" yField=\"data2\" tips=\"true\" opacity=\"0.4\"\/&gt;\n    &lt;apex:radarSeries xField=\"name\" yField=\"data3\" tips=\"true\" \n        markerType=\"cross\" strokeWidth=\"2\" strokeColor=\"#f33\" opacity=\"0.4\"\/&gt;\n &lt;\/apex:chart&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.pages.meta\/pages\/pages_charting.htm\">ref<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002<\/p>\n","protected":false},"author":1,"featured_media":4099,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[271],"tags":[288],"class_list":["post-4098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visualforce-","tag-visualforce-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visualforce \u56fe\u8868 - \u767d\u767d\u968f\u7b14<\/title>\n<meta name=\"description\" content=\"Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.ponybai.com\/?p=4098\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualforce \u56fe\u8868 - \u767d\u767d\u968f\u7b14\" \/>\n<meta property=\"og:description\" content=\"Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.ponybai.com\/?p=4098\" \/>\n<meta property=\"og:site_name\" content=\"\u767d\u767d\u968f\u7b14\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-22T06:04:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-05T07:54:54+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/chart.png\" \/>\n\t<meta property=\"og:image:width\" content=\"721\" \/>\n\t<meta property=\"og:image:height\" content=\"181\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ponybai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"ponybai\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.ponybai.com\/?p=4098#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.ponybai.com\/?p=4098\"},\"author\":{\"name\":\"ponybai\",\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\"},\"headline\":\"Visualforce \u56fe\u8868\",\"datePublished\":\"2024-02-22T06:04:37+00:00\",\"dateModified\":\"2023-12-05T07:54:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.ponybai.com\/?p=4098\"},\"wordCount\":650,\"publisher\":{\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\"},\"keywords\":[\"Visualforce \u56fe\u8868\"],\"articleSection\":[\"Visualforce \u5f00\u53d1\u4eba\u5458\u6307\u5357\"],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.ponybai.com\/?p=4098\",\"url\":\"http:\/\/www.ponybai.com\/?p=4098\",\"name\":\"Visualforce \u56fe\u8868 - \u767d\u767d\u968f\u7b14\",\"isPartOf\":{\"@id\":\"http:\/\/www.ponybai.com\/#website\"},\"datePublished\":\"2024-02-22T06:04:37+00:00\",\"dateModified\":\"2023-12-05T07:54:54+00:00\",\"description\":\"Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002\",\"breadcrumb\":{\"@id\":\"http:\/\/www.ponybai.com\/?p=4098#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.ponybai.com\/?p=4098\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.ponybai.com\/?p=4098#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/www.ponybai.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualforce \u56fe\u8868\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.ponybai.com\/#website\",\"url\":\"http:\/\/www.ponybai.com\/\",\"name\":\"\u767d\u767d\u968f\u7b14\",\"description\":\"Salesforce\u5b98\u65b9\u8bb2\u5e08\",\"publisher\":{\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.ponybai.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\",\"name\":\"ponybai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg\",\"contentUrl\":\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg\",\"width\":248,\"height\":248,\"caption\":\"ponybai\"},\"logo\":{\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/121.37.188.161\"],\"url\":\"http:\/\/www.ponybai.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visualforce \u56fe\u8868 - \u767d\u767d\u968f\u7b14","description":"Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.ponybai.com\/?p=4098","og_locale":"zh_CN","og_type":"article","og_title":"Visualforce \u56fe\u8868 - \u767d\u767d\u968f\u7b14","og_description":"Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002","og_url":"http:\/\/www.ponybai.com\/?p=4098","og_site_name":"\u767d\u767d\u968f\u7b14","article_published_time":"2024-02-22T06:04:37+00:00","article_modified_time":"2023-12-05T07:54:54+00:00","og_image":[{"width":721,"height":181,"url":"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/chart.png","type":"image\/png"}],"author":"ponybai","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"ponybai","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.ponybai.com\/?p=4098#article","isPartOf":{"@id":"http:\/\/www.ponybai.com\/?p=4098"},"author":{"name":"ponybai","@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883"},"headline":"Visualforce \u56fe\u8868","datePublished":"2024-02-22T06:04:37+00:00","dateModified":"2023-12-05T07:54:54+00:00","mainEntityOfPage":{"@id":"http:\/\/www.ponybai.com\/?p=4098"},"wordCount":650,"publisher":{"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883"},"keywords":["Visualforce \u56fe\u8868"],"articleSection":["Visualforce \u5f00\u53d1\u4eba\u5458\u6307\u5357"],"inLanguage":"zh-Hans"},{"@type":"WebPage","@id":"http:\/\/www.ponybai.com\/?p=4098","url":"http:\/\/www.ponybai.com\/?p=4098","name":"Visualforce \u56fe\u8868 - \u767d\u767d\u968f\u7b14","isPartOf":{"@id":"http:\/\/www.ponybai.com\/#website"},"datePublished":"2024-02-22T06:04:37+00:00","dateModified":"2023-12-05T07:54:54+00:00","description":"Visualforce \u56fe\u8868Visualforce \u56fe\u8868\u662f\u4e00\u7ec4\u7ec4\u4ef6\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u76f4\u89c2\u7684\u521b\u5efa\u65b9\u5f0f Visualforce \u9875\u9762\u4e2d\u7684\u56fe\u8868\u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u3002\u4ec0\u4e48\u662f Visualforce Charting\uff1fVisualforce \u56fe\u8868\u4e3a\u60a8\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5 \u6839\u636e\u60a8\u76f4\u63a5\u4ece SOQL \u67e5\u8be2\u521b\u5efa\u7684\u6570\u636e\u96c6\u521b\u5efa\u81ea\u5b9a\u4e49\u4e1a\u52a1\u56fe\u8868\uff0c \u6216\u8005\u901a\u8fc7\u5728\u60a8\u81ea\u5df1\u7684 Apex \u4ee3\u7801\u4e2d\u6784\u5efa\u6570\u636e\u96c6\u3002\u901a\u8fc7\u7ec4\u5408\u548c\u914d\u7f6e\u5355\u4e2a\u6570\u636e \u7cfb\u5217\u4e2d\uff0c\u60a8\u53ef\u4ee5\u7f16\u5199\u56fe\u8868\uff0c\u4ee5\u5bf9\u60a8\u6709\u610f\u4e49\u7684\u65b9\u5f0f\u663e\u793a\u60a8\u7684\u6570\u636e \u7ec4\u7ec7\u3002\u5448\u73b0 Visualforce \u56fe\u8868 \u4f7f\u7528 JavaScript \u7684\u5ba2\u6237\u7aef\u3002\u8fd9\u5141\u8bb8\u56fe\u8868\u662f\u52a8\u753b\u7684\u548c\u89c6\u89c9\u4e0a\u4ee4\u4eba\u5174\u594b\u7684\uff0c\u5e76\u4e14\u56fe\u8868 \u6570\u636e\u53ef\u4ee5\u5f02\u6b65\u52a0\u8f7d\u548c\u91cd\u65b0\u52a0\u8f7d\uff0c\u8fd9\u53ef\u4ee5\u4f7f\u9875\u9762\u611f\u89c9\u66f4\u7075\u654f\u3002","breadcrumb":{"@id":"http:\/\/www.ponybai.com\/?p=4098#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.ponybai.com\/?p=4098"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.ponybai.com\/?p=4098#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/www.ponybai.com\/"},{"@type":"ListItem","position":2,"name":"Visualforce \u56fe\u8868"}]},{"@type":"WebSite","@id":"http:\/\/www.ponybai.com\/#website","url":"http:\/\/www.ponybai.com\/","name":"\u767d\u767d\u968f\u7b14","description":"Salesforce\u5b98\u65b9\u8bb2\u5e08","publisher":{"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.ponybai.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883","name":"ponybai","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/","url":"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg","contentUrl":"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg","width":248,"height":248,"caption":"ponybai"},"logo":{"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/121.37.188.161"],"url":"http:\/\/www.ponybai.com\/?author=1"}]}},"_links":{"self":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts\/4098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4098"}],"version-history":[{"count":1,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts\/4098\/revisions"}],"predecessor-version":[{"id":4117,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts\/4098\/revisions\/4117"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/media\/4099"}],"wp:attachment":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4098"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}