{"id":68,"date":"2023-03-07T16:18:02","date_gmt":"2023-03-07T08:18:02","guid":{"rendered":"https:\/\/www.jishuge.cn\/?p=68"},"modified":"2023-03-07T16:18:02","modified_gmt":"2023-03-07T08:18:02","slug":"%e5%9c%a8vue3%e4%b8%ad%e4%bd%bf%e7%94%a8chart-js%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/blog.jishuge.cn\/?p=68","title":{"rendered":"\u5728Vue3\u4e2d\u4f7f\u7528Chart.js\u7ec4\u4ef6"},"content":{"rendered":"\n

\u5728\u5f00\u53d1\u4e00\u4e2a\u540e\u53f0\u7684\u65f6\u5019\uff0c\u6211\u4eec\u9700\u8981\u7ecf\u5e38\u7528\u5230\u5404\u79cd\u56fe\u8868\u5c55\u793a\u6570\u636e\uff0c\u7136\u540e\u6570\u636e\u66f4\u52a0\u76f4\u89c2\uff0c\u540c\u65f6\u4e5f\u8ba9\u81ea\u5df1\u7684\u9879\u76ee\u903c\u683c\u66f4\u9ad8\u3002\u4eca\u5929\u6211\u4eec\u5c31\u7528Vue3+Chart.js\u7ec4\u4ef6\u6765\u5c55\u793a\u6570\u636e\u3002<\/p>\n\n\n\n

\u6211\u4eec\u5728\u5df2\u7ecf\u5b89\u88c5\u4e86Vue3\u7684\u57fa\u7840\u4e0a\u6765\u5b89\u88c5Chart.js.<\/p>\n\n\n\n

Chart.js\u5b98\u7f51\u5730\u5740\uff1ahttps:\/\/www.chartjs.org\/<\/a><\/p>\n\n\n\n

\u4e00\u3001\u5b89\u88c5Chart.js<\/strong><\/p>\n\n\n\n

npm install chart.js<\/pre>\n\n\n\n
\u4e8c\u3001\u5728vue\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/strong><\/p>\n\n\n\n
html\u4ee3\u7801\uff1a<\/p>\n\n\n\n
        <div class=\"card-content-image\">\n          <canvas id=\"planetChart\" width=\"100%\" height=\"380\"><\/canvas>\n        <\/div><\/pre>\n\n\n\n
script\u4ee3\u7801<\/p>\n\n\n\n
<script setup>\nimport Chart from 'chart.js\/auto';\nimport {onMounted} from \"vue\";\n\nconst data = {\n  labels: ['22-10-01', '22-10-02', '22-10-03', '22-10-04', '22-10-05', '22-10-06', '22-10-07', '22-10-08', '22-10-09', '22-10-10', '22-10-11', '22-10-12'],\n  datasets: [\n    {\n      label: 'Dataset 1',\n      data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 102, 16],\n    },\n    {\n      label: 'Dataset 2',\n      data: [213, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16],\n    }\n  ]\n}\n\nonMounted(() => {\n  const ctx = document.getElementById('planetChart');\n  let chart = new Chart(ctx, {\n    type: 'line',\n    data: data,\n    options: {\n      responsive: true,\n      plugins: {\n        legend: {\n          position: 'top',\n        },\n        title: {\n          display: true,\n          text: '7\u65e5\u6570\u7ec4\u8d70\u52bf\u56fe'\n        }\n      }\n    },\n  });\n})\n<\/script><\/pre>\n\n\n\n
\u5c55\u793a\u7ed3\u679c\uff1a<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u6ce8\u610f<\/strong><\/p>\n\n\n\n
\u5982\u679c\u63d0\u793a chart: can't acquire context from the given item<\/code><\/strong><\/code>  \u662f\u7ec4\u4ef6\u8fd8\u6ca1\u6709\u52a0\u8f7d\u5b8c\u6210\u5bfc\u81f4\u7684\uff0c\u628a\u6267\u884c\u653e\u5165 onMounted \u94a9\u5b50\u51fd\u6570\u4e2d\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n\n\n\n
\u66f4\u591a\u7684\u914d\u7f6e\uff0c\u6bd4\u5982\u989c\u8272\uff0c\u80cc\u666f\u8272\u7b49\u53c2\u8003\u5b98\u7f51\u914d\u7f6e\u6587\u6863\uff1ahttps:\/\/www.chartjs.org\/docs\/latest\/configuration\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u5f00\u53d1\u4e00\u4e2a\u540e\u53f0\u7684\u65f6\u5019\uff0c\u6211\u4eec\u9700\u8981\u7ecf\u5e38\u7528\u5230\u5404\u79cd\u56fe\u8868\u5c55\u793a\u6570\u636e\uff0c\u7136\u540e\u6570\u636e\u66f4\u52a0\u76f4\u89c2\uff0c\u540c\u65f6\u4e5f\u8ba9\u81ea\u5df1\u7684\u9879\u76ee\u903c\u683c\u66f4\u9ad8\u3002\u4eca\u5929\u6211\u4eec … \u7ee7\u7eed\u9605\u8bfb\u5728Vue3\u4e2d\u4f7f\u7528Chart.js\u7ec4\u4ef6<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":73,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8],"tags":[10,9],"class_list":["post-68","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-vue","tag-chart-js","tag-vue"],"_links":{"self":[{"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=68"}],"version-history":[{"count":3,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/posts\/68\/revisions\/72"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=\/wp\/v2\/media\/73"}],"wp:attachment":[{"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jishuge.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}