半岛外围网上直营

点击下载Anychart最新试用版

数据可视化任务

客户希望我们回答的问题：

是否可以在AnyChart JS图表中显示极地图表的一半？

为了解释他愿意在他的图表上看到的内容，客户向我们发送了以下图片的链接：

要解决此任务，我们需要了解极坐标图类的API方法，将极坐标图向左移动并在其上绘制彩色线。

方案概述

首先，我们设置一个容器并在其中绘制极坐标图。接下来，我们只是将图表的一半移动到容器边界之外并更改图表外观。

为了处理主要任务，我们创建了一个使用chart.left（）方法的函数。在这种情况下，图表向左移动容器的宽度（隐藏图表的一半）加上30（使轴标签看起来更好）。

functionrelocateChart(chart) 
{ chart.left(-chart.container().getBounds().width+30);
 }

该函数在我们启动图表绘制之前以及每次调整容器大小时执行，因此我们的图表保持不变。

chart.listen('chartDraw', function(){
relocateChart(chart);
});

该半极坐标图如下图所示：

如您所见，当API中存在适当的方法时，一些挑战实际上是简单的任务。现在让我们通过API 的Polar Chart部分来设置图表外观。

改变图表外观

我们在这里应该做的是在图表上绘制几条彩色线条，以给定的格式显示标签，并使网格线点缀。

首先，我们向数据集添加一些数据：

var data = [
 {x: 52, value: 5.5},
{x: 60, value: 5.9},
{x: 75, value: 6.24},
{x: 90, value: 6.24},
 {x: 110, value: 6.28},
 {x: 120, value: 6.08},
 {x: 135, value: 5.36},
{x: 150, value: 4.5},
{x: 160, value: null},
];

现在我们使用数据显示线条并为每个系列设置特定颜色：

var series = chart.polyline(data);
series.color("#4d9ece");

然后我们按照自己的意愿展示标签：

chart.yAxis().labels().anchor('left-center')
    .offsetY(-2)
    .format('{%value}kts')

并自定义网格使网格线点缀：

chart.xGrid().stroke({
    dash: "1 5"
});

如下图所示。您可以在AnyChart Playground尝试修改此半极坐标图示：

以下是完整代码：

anychart.onDocumentReady(function () { 
var chart = anychart.polar();
// add the lines to the chart 
var series = chart.polyline(getData()[0]);
 series.color("#4d9ece"); 
var series2 = chart.polyline(getData()[1]); 
   series2.color("#ff9941"); 
   var series3 = chart.polyline(getData()[2]);  
   series3.color("#0db341"); 
   var series4 = chart.polyline(getData()[3]);  
   series4.color("#f35556"); 
   var series5 = chart.polyline(getData()[4]); 
   series5.color("#ad6ac7"); 
   var series6 = chart.polyline(getData()[5]); 
   series6.color("#16ccda");
   var series7 = chart.polyline(getData()[6]); 
   series7.color("#f873c7"); 
   // set the maximum value of the x-scale 
   chart.xScale().maximum(360) 
   .ticks([0,45,52,60,75,90,110,120,135,150,165]);  
   chart.yScale().minimum(0)
   .ticks([0,2,4,6,8,10]); 
   chart.yScale().maximum(10); 
   // format labels 
   chart.yAxis().labels().anchor('left-center')
   .offsetY(-2) 
   .format('{%value}kts') 
   chart.xAxis().labels().format('{%value}°')
   chart.xAxis().ticks().length(0); 
   // customize grids
   chart.xGrid().stroke({ 
      dash: "1 5"
    }); 
   chart.yGrid().stroke({ 
      dash: "1 5" 
    }); 
   // set the container id 
   chart.container("container");
   relocateChart(chart); 
   chart.draw(); 
   chart.listen('chartDraw', function(){ 
      relocateChart(chart);
   }); 
   }); 
   function relocateChart(chart) { 
   chart.left(-chart.container().getBounds().width+30); 
   } 
   function getData() {
   return [[ 
   {x: 52, value: 5.5}, 
   {x: 60, value: 5.9},
   {x: 75, value: 6.24}, 
   {x: 90, value: 6.24},
   {x: 110, value: 6.28},
   {x: 120, value: 6.08},
   {x: 135, value: 5.36}, 
   {x: 150, value: 4.5}, 
   {x: 160, value: null}, 
], 
           [ 
   {x: 52, value: 6.6},
   {x: 60, value: 6.85},
   {x: 75, value: 7.02},
   {x: 90, value: 7.06},
   {x: 110, value: 7.21},
   {x: 120, value: 7.1},
   {x: 135, value: 6.65},
   {x: 150, value: 5.66}, 
   {x: 160, value: null},
           ], 
           [  
   {x: 52, value: 6.98},
   {x: 60, value: 7.19},
   {x: 75, value: 7.42}, 
   {x: 90, value: 7.47}, 
   {x: 110, value: 7.71},
   {x: 120, value: 7.71},
   {x: 135, value: 7.31}, 
   {x: 150, value: 6.65},
   {x: 160, value: null}, 
          ], 
          [ 
   {x: 52, value: 7.12}, 
   {x: 60, value: 7.34},
   {x: 75, value: 7.74},
   {x: 90, value: 7.95}, 
   {x: 110, value: 8.08}, 
   {x: 120, value: 8.36},
   {x: 135, value: 7.91},
   {x: 150, value: 7.25}, 
   {x: 160, value: null}, 
          ],
          [
   {x: 52, value: 7.2},
   {x: 60, value: 7.44}, 
   {x: 75, value: 7.94},
   {x: 90, value: 8.42},
   {x: 110, value: 8.48}, 
   {x: 120, value: 8.82},
   {x: 135, value: 8.7},
   {x: 170, value: 7}, 
   {x: 175, value: null},
          ], 
          [
   {x: 52, value: 7.3},
   {x: 60, value: 7.53}, 
   {x: 75, value: 8.07}, 
   {x: 90, value: 8.72}, 
   {x: 110, value: 8.87}, 
   {x: 120, value: 9.27}, 
   {x: 135, value: 9.71},
   {x: 150, value: 8.34}, 
   {x: 160, value: null}, 
          ],
          [ 
   {x: 52, value: 7.41}, 
   {x: 60, value: 7.73},
   {x: 75, value: 8.35}, 
   {x: 90, value: 8.99},
   {x: 110, value: 9.89}, 
   {x: 120, value: 10.22}, 
   {x: 135, value: 11.4}, 
   {x: 150, value: 10.43},
   {x: 160, value: null}, ]]; }

如果这篇关于如何使用JavaScript构建半极地图的文章对您有用，欢迎分享您的疑问和想法！

想要购买Anychart正版授权的朋友可以。

有关产品资讯的更多精彩内容，敬请关注下方的微信公众号▼▼▼