我想使用AMCharts中的折线图,并且要自定义其折线颜色和图例。
我可以更改线条颜色,但图例具有不同的颜色。我是AMCharts的新手。您能告诉我如何自定义吗?
如果您需要更多信息,请在我的JS文件中添加注释:
am4core.useTheme(am4themes_animated);
var base = document.createElement("base");
base.href = "/foo";
document.head.appendChild(base);
setTimeout(function () {
console.log(document.body.baseURI, document.body.baseURI, location.href, document.location.href, window.frameElement, document.documentURI);
}, 5000);
var chart = am4core.create("basediv", am4charts.XYChart);
chart.dataSource.url = "http://c117d4d4.ngrok.io/test/amcharts4/dash/linechartdata.php";
chart.colors.step = 2;
chart.legend = new am4charts.Legend();
chart.legend.useDefaultMarker = true;
//chart.legend = new am4charts.Legend();
//chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
var marker = chart.legend.markers.template.children.getIndex(0);
marker.cornerRadius(12, 12, 12, 12);
marker.strokeWidth = 2;
marker.strokeOpacity = 1;
marker.stroke="#f00";
// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.dateX = "date";
series1.tooltipText = "{value1}"
series1.strokeWidth = 2;
series1.minBulletDistance = 15;
series1.stroke=am4core.color("#ff0");
// Drop-shaped tooltips
series1.tooltip.background.cornerRadius = 20;
series1.tooltip.background.strokeOpacity = 0;
series1.tooltip.pointerOrientation = "vertical";
series1.tooltip.label.minWidth = 40;
series1.tooltip.label.minHeight = 40;
series1.tooltip.label.textAlign = "middle";
series1.tooltip.label.textValign = "middle";
//series1.color="#f00";
//series1.dataFields.color="#f00";
//series1.color="#ff0000";
// Make bullets grow on hover
var bullet1 = series1.bullets.push(new am4charts.CircleBullet());
bullet1.circle.strokeWidth = 2;
bullet1.circle.radius = 4;
bullet1.circle.fill = am4core.color("#f0f");//مشخص نشد
var bullethover1 = bullet1.states.create("hover");
bullethover1.properties.scale = 1.3;
//کار مننننننننننن
series1.name = " اتوبوس";
//series1.lineColor="#f00";
var series2 = chart.series.push(series1.clone());
series2.name = " مینی بوس";
series2.dataFields.valueY = "value2";
series2.dataFields.dateX = "date";
series2.tooltipText = "{value2}"
series2.strokeWidth = 2;
series2.minBulletDistance = 15;
// Drop-shaped tooltipsکاررررر منننن
series2.tooltip.background.cornerRadius = 20;
series2.tooltip.background.strokeOpacity = 0;
series2.tooltip.pointerOrientation = "vertical";
series2.tooltip.label.minWidth = 40;
series2.tooltip.label.minHeight = 40;
series2.tooltip.label.textAlign = "middle";
series2.tooltip.label.textValign = "middle";
series2.fill = chart.colors.next();
//series2.stroke = series2.fill;
series2.stroke=am4core.color("#f0f");// رنگ خط دوم
// Make bullets grow on hover
var bullet2 = series2.bullets.push(new am4charts.CircleBullet());
bullet2.circle.strokeWidth = 2;
bullet2.circle.radius = 4;
bullet2.circle.fill = am4core.color("#f00");
var bullethover2 = bullet2.states.create("hover");
bullethover2.properties.scale = 1.3;
// خط سوم==============================================
var series3 = chart.series.push(series1.clone());
series3.name = " سواری ";
series3.dataFields.valueY = "value3";
series3.dataFields.dateX = "date";
series3.tooltipText = "{value3}"
series3.strokeWidth = 2;
series3.minBulletDistance = 15;
// Drop-shaped tooltipsکاررررر منننن
series3.tooltip.background.cornerRadius = 20;
series3.tooltip.background.strokeOpacity = 0;
series3.tooltip.pointerOrientation = "vertical";
series3.tooltip.label.minWidth = 40;
series3.tooltip.label.minHeight = 40;
series3.tooltip.label.textAlign = "middle";
series3.tooltip.label.textValign = "middle";
series3.fill = chart.colors.next();
//series3.stroke = series3.fill;
series3.stroke ="#fff";
// Make bullets grow on hover
var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
bullet3.circle.strokeWidth = 2;
bullet3.circle.radius = 4;
bullet3.circle.fill = am4core.color("#0f0");
var bullethover3 = bullet3.states.create("hover");
bullethover3.properties.scale = 1.3;
//----------------------------------------------------------
// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
// Create vertical scrollbar and place it before the value axis
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;
chart.scrollbarY.toBack();
// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;
chart.events.on("ready", function () {
dateAxis.zoom({start:0.79, end:1});
});
var i = 0;
dateAxis.events.on('rangechangeended', function (ev) {
i++;
history.replaceState('', {}, '/bar?i='+i+'#abc')
});
我在HTML文件中使用了此图表,该图表的输出为: