Amcharts雷达图

时间：2016-09-13 18:08:31

标签： html amcharts

这里有Amcharts / HTML业余爱好者！我试图复制我的同事制作的图表，但我再也看不到代码了：

pic 1

但是我无法获取我的类别字段来包装文本。标签太长了，我宁愿将整个.jpeg变成正方形，而不是矩形。我已尝试插入"autoWrap": true，但我无法弄清楚如何将其正确放入HTML中。我还尝试插入\n但是再次尝试无法使用{ "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" } ] } 。请查看我当前的雷达图和HTML。我做错了什么？

pic 2 

first

1 个答案:

答案 0 :(得分：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，以便顶部标签不会与轴的最大值重叠。

相关问题
最新问题