图表控件AnyChart教程：如何制作 JavaScript 极坐标图（二）

最新推荐文章于 2024-09-11 10:53:17 发布

原创

最新推荐文章于 2024-09-11 10:53:17 发布 · 624 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#api #人工智能 #javascript #数据可视化 #数据分析

本文提供了一步一步的指南，演示如何使用AnyChart创建自定义的JavaScript极坐标图，包括修改点的宽度、改进工具提示和标题、添加第二个数据系列、改变颜色以及增强标签和标题。教程涵盖了从基础图表到复杂定制的各种技巧，适用于数据可视化和数据分析场景。

JS 极坐标图预览

1.用HTML创建一个基本的网页

2. 引用所需的 JavaScript 文件

是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

点击下载AnyChart最新版

图表控件AnyChart教程：如何制作 JavaScript 极坐标图

初始极地图结果

瞧，这几行代码就准备好了一个基于 JavaScript 的交互式极坐标图！

在此处查看此初始版本，并在AnyChart Playground或CodePen上随意使用它。

<html>
  <head>
    <title>JavaScript Polar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.min.js"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
 
        // create a polar chart
        var chart = anychart.polar();
 
        // add data as an array of objects
        var data = [
          { x: 'Excel', value: 44.7 },
          { x: 'Tableau', value: 36.1 },
          { x: 'Pen & Paper', value: 27.1 },
          { x: 'R', value: 25 },
          { x: 'Python', value: 24.1 },
          { x: 'D3.js', value: 21.2 },
          { x: 'Illustrator', value: 20.3 },
          { x: 'ggplot2', value: 19.8 },
          { x: 'Power BI', value: 18.7 },
          { x: 'Plotly', value: 11.8 },
          { x: 'Matplotlib', value: 10.58 },
          { x: 'Mapbox', value: 9.28 },
          { x: 'QGIS', value: 9.22 },
          { x: 'ArcGIS', value: 7.18 },
          { x: 'React', value: 7.4 }
        ];
 
        // connect the data creating a column series
        var columnSeries = chart.column(data);
 
        // set the x-scale
        chart.xScale(