跨平台图表控件AnyChart教程：是否可以在AnyChart JS图表中显示极地图表的一半？

AnyChart是灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。今天的教程是关于JS极坐标图。花大约5分钟，你会发现如何绘制一个美丽的极地图表，但只显示其一半，使其成为一个半极坐标图表。

Anychart最新试用版

数据可视化任务

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

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

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

要解决此任务，我们需要了解极坐标图类的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正版授权的朋友可以咨询官方客服。

标签：