2016-09-13 5 views
0

Amcharts/HTML-любитель здесь! Я пытаюсь повторить диаграмму, что мой коллега сделал, но я больше не могу видеть код:Amcharts радар-диаграмма

pic 1

, но я не могу получить мое поле категории, чтобы обернуть текст. Ярлыки слишком длинны, я бы предпочел сделать целое .jpeg квадратом, а не прямоугольником. Я попытался вставить "autoWrap": true, как указано выше, но я не мог понять, как правильно разместить его в HTML. Я также попытался вставить \n, но опять же, не мог заставить это работать. Посмотрите мой текущий радарный график и HTML. Что я делаю не так??

pic 2

{ 
    "type": "radar", 
    "categoryField": "Quality", 
    "gridAboveGraphs": true, 
    "startDuration": 2, 
    "fontFamily": "Gill Sans MT", 
    "handDrawThickness": 0, 
    "export": { 
     "enabled": true 
    }, 
    "graphs": [ 
     { 
      "accessibleLabel": "Vietnam", 
      "balloonColor": "#BA0C2F", 
      "fillColors": "#BA0C2F", 
      "id": "Vietnam", 
      "labelAnchor": "middle", 
      "labelPosition": "bottom", 
      "labelText": "", 
      "legendValueText": "", 
      "lineColor": "#BA0C2F", 
      "negativeFillAlphas": 0.11, 
      "negativeFillColors": "#BA0C2F", 
      "title": "Vietnam", 
      "valueAxis": "ValueAxis-1", 
      "valueField": "Vietnam", 
      "xAxis": "ValueAxis-1", 
      "yAxis": "ValueAxis-1" 
     }, 
     { 
      "accessibleLabel": "East Asia and Pacific Average", 
      "balloonColor": "#", 
      "fillColors": "#002F6C", 
      "id": "East Asia and Pacific Average", 
      "legendPeriodValueText": "East Asia Pacific", 
      "legendValueText": "East Asia Pacific", 
      "lineColor": "#002F6C", 
      "markerType": "square", 
      "negativeFillAlphas": 0, 
      "negativeFillColors": "#002F6C", 
      "title": "East Asia and Pacific Average", 
      "valueField": "East Asia Pacific Average" 
     }, 
     { 
      "fillColors": "#8C8985", 
      "id": "AmGraph-4", 
      "lineColor": "#8C8985", 
      "title": "Lower Middle Income Average", 
      "valueField": "Lower Middle Income Average" 
     }, 
     { 
      "fillColors": "#A7C6ED", 
      "id": "AmGraph-5", 
      "lineColor": "#A7C6ED", 
      "title": "United States", 
      "valueField": "United States" 
     } 
    ], 
    "guides": [], 
    "valueAxes": [ 
     { 
      "id": "ValueAxis-1", 
      "dashLength": 3 
     } 
    ], 
    "allLabels": [], 
    "balloon": {}, 
    "titles": [], 
    "dataProvider": [ 
     { 
      "Vietnam": "3.528", 
      "East Asia Pacific Average": "4.09", 
      "Lower Middle Income Average": "3.5", 
      "United States": "4.85", 
      "Quality": "Quality of the Education system" 
     }, 
     { 
      "Vietnam": "4.156654705", 
      "East Asia Pacific Average": "4.4", 
      "Lower Middle Income Average": "3.72", 
      "United States": "4.51", 
      "Quality": "Quality of math and science education" 
     }, 
     { 
      "Vietnam": "3.337434009", 
      "East Asia Pacific Average": "3.82", 
      "Lower Middle Income Average": "2.9", 
      "United States": "6.09", 
      "Quality": "Quality of Scientific Research Institutions" 
     }, 
     { 
      "Vietnam": "3.27048357", 
      "East Asia Pacific Average": "3.96", 
      "Lower Middle Income Average": "2.97", 
      "United States": "5.85", 
      "Quality": "University-Industry Collaboration in R&D" 
     }, 
     { 
      "Vietnam": "3.919624581", 
      "East Asia Pacific Average": "4.29", 
      "Lower Middle Income Average": "3.72", 
      "United States": "5.42", 
      "Quality": "Availability of Scientists and Engineers" 
     } 
    ] 
} 

ответ

0

Я не уверен, почему \n не работает для вас, но он работает в моем фрагменте кода ниже.

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "radar", 
 
    "categoryField": "Quality", 
 
    "gridAboveGraphs": true, 
 
    "startDuration": 2, 
 
    "fontFamily": "Gill Sans MT", 
 
    "handDrawThickness": 0, 
 
    "export": { 
 
     "enabled": true 
 
    }, 
 
    "graphs": [ 
 
     { 
 
      "accessibleLabel": "Vietnam", 
 
      "balloonColor": "#BA0C2F", 
 
      "fillColors": "#BA0C2F", 
 
      "id": "Vietnam", 
 
      "labelAnchor": "middle", 
 
      "labelPosition": "bottom", 
 
      "labelText": "", 
 
      "legendValueText": "", 
 
      "lineColor": "#BA0C2F", 
 
      "negativeFillAlphas": 0.11, 
 
      "negativeFillColors": "#BA0C2F", 
 
      "title": "Vietnam", 
 
      "valueAxis": "ValueAxis-1", 
 
      "valueField": "Vietnam", 
 
      "xAxis": "ValueAxis-1", 
 
      "yAxis": "ValueAxis-1" 
 
     }, 
 
     { 
 
      "accessibleLabel": "East Asia and Pacific Average", 
 
      "balloonColor": "#", 
 
      "fillColors": "#002F6C", 
 
      "id": "East Asia and Pacific Average", 
 
      "legendPeriodValueText": "East Asia Pacific", 
 
      "legendValueText": "East Asia Pacific", 
 
      "lineColor": "#002F6C", 
 
      "markerType": "square", 
 
      "negativeFillAlphas": 0, 
 
      "negativeFillColors": "#002F6C", 
 
      "title": "East Asia and Pacific Average", 
 
      "valueField": "East Asia Pacific Average" 
 
     }, 
 
     { 
 
      "fillColors": "#8C8985", 
 
      "id": "AmGraph-4", 
 
      "lineColor": "#8C8985", 
 
      "title": "Lower Middle Income Average", 
 
      "valueField": "Lower Middle Income Average" 
 
     }, 
 
     { 
 
      "fillColors": "#A7C6ED", 
 
      "id": "AmGraph-5", 
 
      "lineColor": "#A7C6ED", 
 
      "title": "United States", 
 
      "valueField": "United States" 
 
     } 
 
    ], 
 
    "guides": [], 
 
    "valueAxes": [ 
 
     { 
 
      "id": "ValueAxis-1", 
 
      "dashLength": 3, 
 
      "axisTitleOffset": 20 
 
     } 
 
    ], 
 

 
    "dataProvider": [ 
 
     { 
 
      "Vietnam": "3.528", 
 
      "East Asia Pacific Average": "4.09", 
 
      "Lower Middle Income Average": "3.5", 
 
      "United States": "4.85", 
 
      "Quality": "Quality of the\nEducation system" 
 
     }, 
 
     { 
 
      "Vietnam": "4.156654705", 
 
      "East Asia Pacific Average": "4.4", 
 
      "Lower Middle Income Average": "3.72", 
 
      "United States": "4.51", 
 
      "Quality": "Quality of math and\nscience education\n" 
 
     }, 
 
     { 
 
      "Vietnam": "3.337434009", 
 
      "East Asia Pacific Average": "3.82", 
 
      "Lower Middle Income Average": "2.9", 
 
      "United States": "6.09", 
 
      "Quality": "Quality of Scientific\nResearch Institutions" 
 
     }, 
 
     { 
 
      "Vietnam": "3.27048357", 
 
      "East Asia Pacific Average": "3.96", 
 
      "Lower Middle Income Average": "2.97", 
 
      "United States": "5.85", 
 
      "Quality": "University-Industry\nCollaboration in R&D" 
 
     }, 
 
     { 
 
      "Vietnam": "3.919624581", 
 
      "East Asia Pacific Average": "4.29", 
 
      "Lower Middle Income Average": "3.72", 
 
      "United States": "5.42", 
 
      "Quality": "Availability of Scientists\nand Engineers" 
 
     } 
 
    ] 
 
});
#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/radar.js"></script> 
 
<div id="chartdiv"></div>

Обратите внимание, что \n потребности быть в самом значении метки. Я также добавил axisTitleOffset, чтобы верхняя метка не перекрывала максимальное значение вашей оси.