2016-09-13 6 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を追加しました。