點(diǎn)擊下載Anychart最新試用版

數(shù)據(jù)可視化任務(wù)

客戶希望我們回答的問(wèn)題：

是否可以在AnyChart JS圖表中顯示極地圖表的一半？

為了解釋他愿意在他的圖表上看到的內(nèi)容，客戶向我們發(fā)送了以下圖片的鏈接：

要解決此任務(wù)，我們需要了解極坐標(biāo)圖類的API方法，將極坐標(biāo)圖向左移動(dòng)并在其上繪制彩色線。

方案概述

首先，我們?cè)O(shè)置一個(gè)容器并在其中繪制極坐標(biāo)圖。接下來(lái)，我們只是將圖表的一半移動(dòng)到容器邊界之外并更改圖表外觀。

為了處理主要任務(wù)，我們創(chuàng)建了一個(gè)使用chart.left（）方法的函數(shù)。在這種情況下，圖表向左移動(dòng)容器的寬度（隱藏圖表的一半）加上30（使軸標(biāo)簽看起來(lái)更好）。

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

該函數(shù)在我們啟動(dòng)圖表繪制之前以及每次調(diào)整容器大小時(shí)執(zhí)行，因此我們的圖表保持不變。

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

該半極坐標(biāo)圖如下圖所示：

如您所見(jiàn)，當(dāng)API中存在適當(dāng)?shù)姆椒〞r(shí)，一些挑戰(zhàn)實(shí)際上是簡(jiǎn)單的任務(wù)。現(xiàn)在讓我們通過(guò)API 的Polar Chart部分來(lái)設(shè)置圖表外觀。

改變圖表外觀

我們?cè)谶@里應(yīng)該做的是在圖表上繪制幾條彩色線條，以給定的格式顯示標(biāo)簽，并使網(wǎng)格線點(diǎn)綴。

首先，我們向數(shù)據(jù)集添加一些數(shù)據(jù)：

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},
];

現(xiàn)在我們使用數(shù)據(jù)顯示線條并為每個(gè)系列設(shè)置特定顏色：

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

然后我們按照自己的意愿展示標(biāo)簽：

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

并自定義網(wǎng)格使網(wǎng)格線點(diǎn)綴：

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

如下圖所示。您可以在AnyChart Playground嘗試修改此半極坐標(biāo)圖示：

以下是完整代碼：

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}, ]]; }

如果這篇關(guān)于如何使用JavaScript構(gòu)建半極地圖的文章對(duì)您有用，歡迎分享您的疑問(wèn)和想法！

想要購(gòu)買(mǎi)Anychart正版授權(quán)的朋友可以。

有關(guān)產(chǎn)品資訊的更多精彩內(nèi)容，敬請(qǐng)關(guān)注下方的微信公眾號(hào)▼▼▼