{"id":225233,"date":"2021-09-03T10:07:23","date_gmt":"2021-09-03T02:07:23","guid":{"rendered":"https:\/\/lrxjmw.cn\/?p=225233"},"modified":"2021-08-25T09:08:58","modified_gmt":"2021-08-25T01:08:58","slug":"understand-what-is-2","status":"publish","type":"post","link":"https:\/\/lrxjmw.cn\/understand-what-is-2.html","title":{"rendered":"\u4e86\u89e3\u4e0b\u4f55\u4e3aHighcharts \u914d\u7f6e\u8bed\u6cd5"},"content":{"rendered":"\n\n\n
\u5bfc\u8bfb<\/td>\nHighcharts \u662f\u4e00\u4e2a\u7528\u7eafJavaScript\u7f16\u5199\u7684\u4e00\u4e2a\u56fe\u8868\u5e93\u3002Highcharts \u80fd\u591f\u5f88\u7b80\u5355\u4fbf\u6377\u7684\u5728web\u7f51\u7ad9\u6216\u662fweb\u5e94\u7528\u7a0b\u5e8f\u6dfb\u52a0\u6709\u4ea4\u4e92\u6027\u7684\u56fe\u8868\uff0cHighcharts \u514d\u8d39\u63d0\u4f9b\u7ed9\u4e2a\u4eba\u5b66\u4e60\u3001\u4e2a\u4eba\u7f51\u7ad9\u548c\u975e\u5546\u4e1a\u7528\u9014\u4f7f\u7528\u3002<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\"\"<\/p>\n

\u672c\u7ae0\u8282\u6211\u4eec\u5c06\u4e3a\u5927\u5bb6\u4ecb\u7ecd\u4f7f\u7528 Highcharts \u751f\u6210\u56fe\u8868\u7684\u4e00\u4e9b\u914d\u7f6e\u3002<\/p>\n

\u7b2c\u4e00\u6b65\uff1a\u521b\u5efa HTML \u9875\u9762<\/strong><\/div>\n

\u521b\u5efa\u4e00\u4e2a HTML \u9875\u9762\uff0c\u5f15\u5165 jQuery \u548c Highcharts \u5e93\uff1a<\/p>\n

\u6587\u4ef6\u540d\uff1aHighchartsTest.htm<\/p>\n

<html><\/span>\r\n<\/span><head><\/span>\r\n<\/span><title><\/span>Highcharts \u6559\u7a0b | \u83dc\u9e1f\u6559\u7a0b<\/span><\/title><\/span>\r\n    <\/span><script<\/span> <\/span>src<\/span>=<\/span>\"http:\/\/apps.bdimg.com\/libs\/jquery\/2.1.4\/jquery.min.js\"<\/span>><\/script><\/span>\r\n   <\/span><script<\/span> <\/span>src<\/span>=<\/span>\"\/try\/demo_source\/highcharts.js\"<\/span>><\/script><\/span>\r\n<\/span><\/head><\/span>\r\n<\/span><body><\/span>\r\n<\/span><div<\/span> <\/span>id<\/span>=<\/span>\"container\"<\/span> <\/span>style<\/span>=<\/span>\"<\/span>width<\/span>:<\/span> <\/span>550px<\/span>;<\/span> height<\/span>:<\/span> <\/span>400px<\/span>;<\/span> margin<\/span>:<\/span> <\/span>0<\/span> <\/span>auto<\/span>\"<\/span>><\/div><\/span>\r\n<\/span><script<\/span> <\/span>language<\/span>=<\/span>\"JavaScript\"<\/span>><\/span>\r\n$<\/span>(<\/span>document<\/span>).<\/span>ready<\/span>(<\/span>function<\/span>()<\/span> <\/span>{<\/span>\r\n     \r\n<\/span>});<\/span>\r\n<\/span><\/script><\/span>\r\n<\/span><\/body><\/span>\r\n<\/span><\/html><\/span><\/pre>\n
\u5b9e\u4f8b\u4e2d id \u4e3a container \u7684 div \u7528\u4e8e\u5305\u542b Highcharts \u7ed8\u5236\u7684\u56fe\u8868\u3002<\/p>\n
\u7b2c\u4e8c\u6b65: \u521b\u5efa\u914d\u7f6e\u6587\u4ef6<\/strong><\/div>\n
Highcharts \u5e93\u4f7f\u7528 json \u683c\u5f0f\u6765\u914d\u7f6e\u3002<\/p>\n
$('#container').highcharts(json);<\/pre>\n
\u8fd9\u91cc json \u8868\u793a\u4f7f\u7528 json \u6570\u636e\u683c\u5f0f\u548c json \u683c\u5f0f\u7684\u914d\u7f6e\u6765\u7ed8\u5236\u56fe\u8868\u3002\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n
\u6807\u9898<\/strong><\/p>\n
\u4e3a\u56fe\u8868\u914d\u7f6e\u6807\u9898\uff1a<\/p>\n
var title = {\r\n  text: '\u6708\u5e73\u5747\u6c14\u6e29'   \r\n};<\/pre>\n
\u526f\u6807\u9898<\/strong><\/p>\n
\u4e3a\u56fe\u8868\u914d\u7f6e\u526f\u6807\u9898\uff1a<\/p>\n
var subtitle = {\r\n  text: 'Source: runoob.com'\r\n};<\/pre>\n
X \u8f74<\/strong><\/span><\/div>\n
\u914d\u7f6e\u8981\u5728 X \u8f74\u663e\u793a\u7684\u9879\u3002<\/p>\n
var xAxis = {\r\n   categories: ['\u4e00\u6708', '\u4e8c\u6708', '\u4e09\u6708', '\u56db\u6708', '\u4e94\u6708', '\u516d\u6708'\r\n      ,'\u4e03\u6708', '\u516b\u6708', '\u4e5d\u6708', '\u5341\u6708', '\u5341\u4e00\u6708', '\u5341\u4e8c\u6708']\r\n};<\/pre>\n
Y \u8f74<\/strong><\/span><\/div>\n
\u914d\u7f6e\u8981\u5728 Y \u8f74\u663e\u793a\u7684\u9879\u3002<\/p>\n
var yAxis = {\r\n   title: {\r\n      text: 'Temperature (\\xB0C)'\r\n   },\r\n   plotLines: [{\r\n      value: 0,\r\n      width: 1,\r\n      color: '#808080'\r\n   }]\r\n};<\/pre>\n
\u63d0\u793a\u4fe1\u606f<\/strong><\/span><\/div>\n
\u914d\u7f6e\u63d0\u793a\u4fe1\u606f\uff1a<\/p>\n
var tooltip = {\r\n   valueSuffix: '\\xB0C'\r\n}<\/pre>\n
\u5c55\u793a\u65b9\u5f0f<\/strong><\/span><\/div>\n
\u914d\u7f6e\u56fe\u8868\u5411\u53f3\u5bf9\u9f50\uff1a<\/p>\n
var legend = {\r\n   layout: 'vertical',\r\n   align: 'right',\r\n   verticalAlign: 'middle',\r\n   borderWidth: 0\r\n};<\/pre>\n
\u6570\u636e<\/strong><\/span><\/div>\n
\u914d\u7f6e\u56fe\u8868\u8981\u5c55\u793a\u7684\u6570\u636e\u3002\u6bcf\u4e2a\u7cfb\u5217\u662f\u4e2a\u6570\u7ec4\uff0c\u6bcf\u4e00\u9879\u5728\u56fe\u7247\u4e2d\u90fd\u4f1a\u751f\u6210\u4e00\u6761\u66f2\u7ebf\u3002<\/p>\n
var series =  [\r\n   {\r\n      name: 'Tokyo',\r\n      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, \r\n         26.5, 23.3, 18.3, 13.9, 9.6]\r\n   }, \r\n   {\r\n      name: 'New York',\r\n      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, \r\n         24.1, 20.1, 14.1, 8.6, 2.5]\r\n   }, \r\n   {\r\n      name: 'Berlin',\r\n      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, \r\n         17.9, 14.3, 9.0, 3.9, 1.0]\r\n   }, \r\n   {\r\n      name: 'London',\r\n      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, \r\n         16.6, 14.2, 10.3, 6.6, 4.8]\r\n   }\r\n];<\/pre>\n
\u7b2c\u4e09\u6b65: \u521b\u5efa json \u6570\u636e<\/strong><\/div>\n
\u7ec4\u5408\u662f\u7531\u914d\u7f6e\u4fe1\u606f:<\/p>\n
var json = {};\r\n\r\njson.title = title;\r\njson.subtitle = subtitle;\r\njson.xAxis = xAxis;\r\njson.yAxis = yAxis;\r\njson.tooltip = tooltip;\r\njson.legend = legend;\r\njson.series = series;\r\nStep 4: Draw the chart\r\n$('#container').highcharts(json);<\/pre>\n
\u5b9e\u4f8b<\/strong>
\n\u4ee5\u4e0b\u4e3a\u5b8c\u6574\u7684\u5b9e\u4f8b(HighchartsTest.htm)\uff1a<\/p>\n
<html><\/span>\r\n<\/span><head><\/span>\r\n<\/span><meta<\/span> <\/span>charset<\/span>=<\/span>\"UTF-8\"<\/span> <\/span>\/><\/span>\r\n<\/span><title><\/span>Highcharts \u6559\u7a0b | \u83dc\u9e1f\u6559\u7a0b(runoob.com)<\/span><\/title><\/span>\r\n<\/span><script<\/span> <\/span>src<\/span>=<\/span>\"http:\/\/apps.bdimg.com\/libs\/jquery\/2.1.4\/jquery.min.js\"<\/span>><\/script><\/span>\r\n<\/span><script<\/span> <\/span>src<\/span>=<\/span>\"http:\/\/code.highcharts.com\/highcharts.js\"<\/span>><\/script><\/span>\r\n<\/span><\/head><\/span>\r\n<\/span><body><\/span>\r\n<\/span><div<\/span> <\/span>id<\/span>=<\/span>\"container\"<\/span> <\/span>style<\/span>=<\/span>\"<\/span>width<\/span>:<\/span> <\/span>550px<\/span>;<\/span> height<\/span>:<\/span> <\/span>400px<\/span>;<\/span> margin<\/span>:<\/span> <\/span>0<\/span> <\/span>auto<\/span>\"<\/span>><\/div><\/span>\r\n<\/span><script<\/span> <\/span>language<\/span>=<\/span>\"JavaScript\"<\/span>><\/span>\r\n$<\/span>(<\/span>document<\/span>).<\/span>ready<\/span>(<\/span>function<\/span>()<\/span> <\/span>{<\/span>\r\n   <\/span>var<\/span> title <\/span>=<\/span> <\/span>{<\/span>\r\n       text<\/span>:<\/span> <\/span>'\u6708\u5e73\u5747\u6c14\u6e29'<\/span>   \r\n   <\/span>};<\/span>\r\n   <\/span>var<\/span> subtitle <\/span>=<\/span> <\/span>{<\/span>\r\n        text<\/span>:<\/span> <\/span>'Source: runoob.com'<\/span>\r\n   <\/span>};<\/span>\r\n   <\/span>var<\/span> xAxis <\/span>=<\/span> <\/span>{<\/span>\r\n       categories<\/span>:<\/span> <\/span>[<\/span>'\u4e00\u6708'<\/span>,<\/span> <\/span>'\u4e8c\u6708'<\/span>,<\/span> <\/span>'\u4e09\u6708'<\/span>,<\/span> <\/span>'\u56db\u6708'<\/span>,<\/span> <\/span>'\u4e94\u6708'<\/span>,<\/span> <\/span>'\u516d\u6708'<\/span>\r\n              <\/span>,<\/span>'\u4e03\u6708'<\/span>,<\/span> <\/span>'\u516b\u6708'<\/span>,<\/span> <\/span>'\u4e5d\u6708'<\/span>,<\/span> <\/span>'\u5341\u6708'<\/span>,<\/span> <\/span>'\u5341\u4e00\u6708'<\/span>,<\/span> <\/span>'\u5341\u4e8c\u6708'<\/span>]<\/span>\r\n   <\/span>};<\/span>\r\n   <\/span>var<\/span> yAxis <\/span>=<\/span> <\/span>{<\/span>\r\n      title<\/span>:<\/span> <\/span>{<\/span>\r\n         text<\/span>:<\/span> <\/span>'Temperature (\\xB0C)'<\/span>\r\n      <\/span>},<\/span>\r\n      plotLines<\/span>:<\/span> <\/span>[{<\/span>\r\n         value<\/span>:<\/span> <\/span>0<\/span>,<\/span>\r\n         width<\/span>:<\/span> <\/span>1<\/span>,<\/span>\r\n         color<\/span>:<\/span> <\/span>'#808080'<\/span>\r\n      <\/span>}]<\/span>\r\n   <\/span>};<\/span>   \r\n\r\n   <\/span>var<\/span> tooltip <\/span>=<\/span> <\/span>{<\/span>\r\n      valueSuffix<\/span>:<\/span> <\/span>'\\xB0C'<\/span>\r\n   <\/span>}<\/span>\r\n\r\n   <\/span>var<\/span> legend <\/span>=<\/span> <\/span>{<\/span>\r\n      layout<\/span>:<\/span> <\/span>'vertical'<\/span>,<\/span>\r\n      align<\/span>:<\/span> <\/span>'right'<\/span>,<\/span>\r\n      verticalAlign<\/span>:<\/span> <\/span>'middle'<\/span>,<\/span>\r\n      borderWidth<\/span>:<\/span> <\/span>0<\/span>\r\n   <\/span>};<\/span>\r\n\r\n   <\/span>var<\/span> series <\/span>=<\/span>  <\/span>[<\/span>\r\n      <\/span>{<\/span>\r\n         name<\/span>:<\/span> <\/span>'Tokyo'<\/span>,<\/span>\r\n         data<\/span>:<\/span> <\/span>[<\/span>7.0<\/span>,<\/span> <\/span>6.9<\/span>,<\/span> <\/span>9.5<\/span>,<\/span> <\/span>14.5<\/span>,<\/span> <\/span>18.2<\/span>,<\/span> <\/span>21.5<\/span>,<\/span> <\/span>25.2<\/span>,<\/span>\r\n            <\/span>26.5<\/span>,<\/span> <\/span>23.3<\/span>,<\/span> <\/span>18.3<\/span>,<\/span> <\/span>13.9<\/span>,<\/span> <\/span>9.6<\/span>]<\/span>\r\n      <\/span>},<\/span> \r\n      <\/span>{<\/span>\r\n         name<\/span>:<\/span> <\/span>'New York'<\/span>,<\/span>\r\n         data<\/span>:<\/span> <\/span>[-<\/span>0.2<\/span>,<\/span> <\/span>0.8<\/span>,<\/span> <\/span>5.7<\/span>,<\/span> <\/span>11.3<\/span>,<\/span> <\/span>17.0<\/span>,<\/span> <\/span>22.0<\/span>,<\/span> <\/span>24.8<\/span>,<\/span>\r\n            <\/span>24.1<\/span>,<\/span> <\/span>20.1<\/span>,<\/span> <\/span>14.1<\/span>,<\/span> <\/span>8.6<\/span>,<\/span> <\/span>2.5<\/span>]<\/span>\r\n      <\/span>},<\/span> \r\n      <\/span>{<\/span>\r\n         name<\/span>:<\/span> <\/span>'Berlin'<\/span>,<\/span>\r\n         data<\/span>:<\/span> <\/span>[-<\/span>0.9<\/span>,<\/span> <\/span>0.6<\/span>,<\/span> <\/span>3.5<\/span>,<\/span> <\/span>8.4<\/span>,<\/span> <\/span>13.5<\/span>,<\/span> <\/span>17.0<\/span>,<\/span> <\/span>18.6<\/span>,<\/span>\r\n            <\/span>17.9<\/span>,<\/span> <\/span>14.3<\/span>,<\/span> <\/span>9.0<\/span>,<\/span> <\/span>3.9<\/span>,<\/span> <\/span>1.0<\/span>]<\/span>\r\n      <\/span>},<\/span> \r\n      <\/span>{<\/span>\r\n         name<\/span>:<\/span> <\/span>'London'<\/span>,<\/span>\r\n         data<\/span>:<\/span> <\/span>[<\/span>3.9<\/span>,<\/span> <\/span>4.2<\/span>,<\/span> <\/span>5.7<\/span>,<\/span> <\/span>8.5<\/span>,<\/span> <\/span>11.9<\/span>,<\/span> <\/span>15.2<\/span>,<\/span> <\/span>17.0<\/span>,<\/span> \r\n            <\/span>16.6<\/span>,<\/span> <\/span>14.2<\/span>,<\/span> <\/span>10.3<\/span>,<\/span> <\/span>6.6<\/span>,<\/span> <\/span>4.8<\/span>]<\/span>\r\n      <\/span>}<\/span>\r\n   <\/span>];<\/span>\r\n\r\n   <\/span>var<\/span> json <\/span>=<\/span> <\/span>{};<\/span>\r\n\r\n   json<\/span>.<\/span>title <\/span>=<\/span> title<\/span>;<\/span>\r\n   json<\/span>.<\/span>subtitle <\/span>=<\/span> subtitle<\/span>;<\/span>\r\n   json<\/span>.<\/span>xAxis <\/span>=<\/span> xAxis<\/span>;<\/span>\r\n   json<\/span>.<\/span>yAxis <\/span>=<\/span> yAxis<\/span>;<\/span>\r\n   json<\/span>.<\/span>tooltip <\/span>=<\/span> tooltip<\/span>;<\/span>\r\n   json<\/span>.<\/span>legend <\/span>=<\/span> legend<\/span>;<\/span>\r\n   json<\/span>.<\/span>series <\/span>=<\/span> series<\/span>;<\/span>\r\n\r\n   $<\/span>(<\/span>'#container'<\/span>).<\/span>highcharts<\/span>(<\/span>json<\/span>);<\/span>\r\n<\/span>});<\/span>\r\n<\/span><\/script><\/span>\r\n<\/span><\/body><\/span>\r\n<\/span><\/html><\/span><\/pre>\n