我想在使用amCharts创建的图表中显示Diamond Shaped图标

Question

我想在我的图表中显示菱形图标。我使用amCharts创建了这个图表。

我现在的amChart：

我想把菱形图标放在下图中：

这是我的JavaScript代码：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent returnedIntent) {
     super.onActivityResult(requestCode, resultCode, returnedIntent);
     if (returnedIntent == null) return;
     switch (requestCode) {
         case REQUEST_CODE_GALLERY_FILES:
             Uri uri = returnedIntent.getData();               
             break;
     }
}

Answer 1

如果您的图表从不使用数据点分组，无论是通过少量数据点还是禁用数据点，您都应该使用bulletField解决方案@gerric建议。

如果上述内容不适用，可能最好的做法是使用Trend lines。

趋势线基本上是从一个日期时间/值对到另一个日期时间/值对的一条线。但是，它的两端也可以附加一个图标，我们可以利用这个图标在图表的任何一点添加钻石图像（我们将使用SVG）。

以下是现成图表的示例：

var icon = "M256,0L96,256l160,256l160-256L256,0z";

var chartData = [];
var iconDate, iconValue;

generateChartData();

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 500);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 500; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    var val = Math.round(Math.random() * (40 + i)) + 100 + i;
    chartData.push({
      date: newDate,
      value1: val
    });
    if (i === 480) {
      iconDate = new Date(newDate);
      iconDate.setHours(12);
      iconValue = val;
    }
  }
}

var chart = AmCharts.makeChart("chartdiv", {
  type: "stock",
  "theme": "light",

  "dataSets": [{
    "fieldMappings": [{
      "fromField": "value1",
      "toField": "value1"
    }, {
      "fromField": "value2",
      "toField": "value2"
    }, {
      "fromField": "value3",
      "toField": "value3"
    }, {
      "fromField": "value4",
      "toField": "value4"
    }],
    "dataProvider": chartData,
    "categoryField": "date"
  }],

  "panels": [{
    "stockGraphs": [{
      "id": "g1",
      "title": "Graph #1",
      "lineThickness": 2,
      "valueField": "value1",
      "useDataSetColors": false
    }],
    "trendLines": [{
      "initialValue": iconValue,
      "initialDate": iconDate,
      "lineAlpha": 1,
      "lineColor": "#ff0000",
      "initialImage": {
        "svgPath": icon,
        "color": "#cc0000",
        "width": 15,
        "height": 25,
        "offsetX": -7
      },
      "finalValue": iconValue,
      "finalDate": iconDate
    }]
  }],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  },

  "periodSelector": {
    "position": "bottom",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  }
});

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

Answer 2

如果您使用bulletField，则可以在数据中设置项目符号。钻石形状已由AmCharts提供。
这两个示例可以帮助您：fiddle＆amp; amDemo