2014-08-15 4 views
0

я работаю с Highcharts паутины графиком в данный момент и хотел, чтобы увидеть, если я могу сделать следующийHighcharts - паутина диаграмма вопросы

  • Как увеличить полярные графики? (или это возможно?)
  • Как поместить фоновый цвет в каждый сегмент?

ответ

1

Как увеличить полярные диаграммы? (или возможно?)

Если вы хотите увеличить масштаб, например zoomType, то нет. zoomType отключен для полярных карт highcharts-more.js. От источника:

// Disable certain features on angular and polar axes 
chart.inverted = false; 
chartOptions.chart.zoomType = null; 

Как поместить цвет фона в каждом сегменте?

Вы можете использовать математику и Chart.renderer для создания и заполнения путей к цвету фона сегментов. Например, вы можете сделать это следующим образом:

var colors = [ "pink", "yellow", "blue", "red", "green", "cyan", "teal", "indigo" ];  
var parts = 6; 

for(var i = 0; i < parts; i++) { 
    centerX = chart.plotLeft + chart.yAxis[0].center[0]; 
    centerY = chart.plotTop + chart.yAxis[0].center[1]; 
    axisLength = chart.yAxis[0].height; 
    angleOffset = -Math.PI/2; 
    angleSegment = Math.PI/(parts/2); 

    firstPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * i))); 
    firstPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * i))); 

    secondPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * (i+1)))); 
    secondPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * (i+1))));                      

    chart.renderer.path([ 
     'M', centerX, centerY, 
     'L', firstPointX, firstPointY, 
     'L', secondPointX, secondPointY, 
     'Z' 
    ]).attr({ 
     fill: colors[i % colors.length], 
     'stroke-width': 1, 
     'opacity': 1 
    }).add(); 
} 

Как видно из this JSFiddle demonstration. Вам просто нужно сопоставить число категорий с переменной parts.

+0

благодарит @ondkloss, есть ли другая форма масштабирования? Думаю, я, вероятно, думаю, что мне нужно изменить мин и макс оси ... – ericbae

+0

Это хорошее предложение. Сортировка «фальшивого увеличения», но использование «chart.yAxis [0] .setExtremes (min, max)» - это хоть что-то. –

Смежные вопросы