Я хочу показать значок в форме ромба на моем графике, созданном с помощью amCharts
Я хочу показать ромбовидную иконку на своем графике. Я создал эти графики с помощью amCharts.
Мой настоящий amChart:
И я хочу поставить ромбовидную иконку, как на следующем рисунке:
Вот мой код JavaScript:
function getChart(id) {
var allCharts = AmCharts.charts;
for (var i = 0; i < allCharts.length; i++) {
if (id == allCharts[i].div.id) {
return allCharts[i];
}
}
}
function load_holding_graph(graph_type, history, title, aggregate, industry){
var title_1 = industry[0].ticker + '\n';
var title_2 = industry[0].name;
var title_3 = industry[0].industry + ' . ' + industry[0].sector;
// current day exclude weekends
var current_date = new Date();
switch(current_date.getDay()){
case 0:
var s = new Date(current_date.getTime());
var d = s.setDate(current_date.getDate() - 1);
break;
case 6:
var s = new Date(current_date.getTime());
var d = s.setDate(current_date.getDate() - 2);
break;
default:
var d = current_date;
}
var latest_trading_day = $.datepicker.formatDate('dd MM, yy', d);
// CREATE DATA
var chartData = [];
generateChartData(history);
function generateChartData() {
for (var i = 0; i < history.length; i++) {
var date = new Date(history[i].date);
var val = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
date: date,
open: history[i].open,
close: history[i].close,
high: history[i].high,
low: history[i].low,
volume: history[i].volume,
value: val
});
}
}
// CHART CONFIG
var chartConfig = {
type: "stock",
pathToImages : "/static/img/amcharts/",
addClassNames:true,
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "val",
toField: "val"
}
],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date",
compared: false,
},
{
fieldMappings: [{
fromField: "value",
toField: "value"
}],
color: "#fff",
dataProvider: chartData,
title: title,
categoryField: "date"
},
],
panels: [{
addClassNames:true,
percentHeight: 75,
valueAxes: [{
id:"v1",
//logarithmic:true,
unit : '$',
unitPosition:"left",
position:"left",
},
{
id:"v2",
unit : '$',
unitPosition:"left",
position:"right",
synchronizeWith: "v1",
synchronizationMultiplier: 1,
},
],
marginBottom: 0,
marginTop: 0,
stockGraphs: [{type: graph_type,
id: "g1",
title:title,
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#11EDF1",
fillColors: "#11EDF1",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
// comparedGraphLineThickness: 2,
columnWidth: 0.4,
useDataSetColors: false,
comparable: true,
compareField: "close",
bullet : "round",
bulletAlpha : 0,
showBalloon: true,
showBalloonAt:"top",
"balloonText":"$[[value]]",
} ],
stockLegend: {
enabled:true,
useGraphSettings:true,
data:[{title: ""}],
// valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%",
markerType: "diamond",
backgroundColor :"#ffffff",
markerSize : 24,
position:"top",
},
},
],
panelsSettings: {
color: "#fff",
plotAreaFillColors: "#333",
plotAreaFillAlphas: 1,
marginLeft: 60,
marginRight: 60,
marginTop: 20,
marginBottom: 5,
},
categoryAxesSettings: {
equalSpacing: true,
gridColor: "#555",
gridAlpha: 1,
maxSeries:0,
markPeriodChange:false,
autoGridCount:true,
minHorizontalGap:100,
dateFormats: [{period:'fff',format:'JJ:NN:SS'},
{period:'ss',format:'JJ:NN:SS'},
{period:'mm',format:'JJ:NN'},
{period:'hh',format:'JJ:NN'},
{period:'DD',format:'MMM DD, YYYY'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MMM YYYY'},
{period:'YYYY',format:'YYYY'}],
},
valueAxesSettings: {
gridColor: "#555",
gridAlpha: 1,
inside: false,
showLastLabel: true,
},
chartCursorSettings: {
pan: true,
valueLineEnabled:true,
valueLineBalloonEnabled:true,
onePanelOnly:true,
},
legendSettings: {
color: "#fff"
},
stockEventsSettings: {
showAt: "high"
},
balloon: {
textAlign: "left",
offsetY: 10,
},
"export": {
"enabled": true,
"backgroundColor": "#fff",
},
}
AmCharts.charts = [];
// CREATE CHART
var chart = AmCharts.makeChart("holding-graph",chartConfig);
console.log(chart)
}
2 ответа
Решение
Если ваша диаграмма никогда не использует группировку точек данных, либо имея несколько точек данных или отключив их, вы должны пойти с bulletField решение @gerric предложено.
Если вышеприведенное не применимо, возможно, лучшим способом для этого является использование линий тренда.
Линия тренда - это в основном линия от одной пары дата / время к другой. Однако к нему также может быть прикреплен значок, который мы можем использовать для добавления алмазного изображения (мы будем использовать 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>