我正在绘制amcharts 4多折线图,并且我还通过填充区域在线条上应用梯度效果。
下面是我的工作表。
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"value": 450,
"value2": 362,
"value3": 699
}, {
"date": new Date(2018, 0, 2),
"value": 269,
"value2": 450,
"value3": 841
}, {
"date": new Date(2018, 0, 3),
"value": 700,
"value2": 358,
"value3": 699
}, {
"date": new Date(2018, 0, 4),
"value": 490,
"value2": 367,
"value3": 500
}, {
"date": new Date(2018, 0, 5),
"value": 500,
"value2": 485,
"value3": 369
}, {
"date": new Date(2018, 0, 6),
"value": 550,
"value2": 354,
"value3": 250
}, {
"date": new Date(2018, 0, 7),
"value": 420,
"value2": 350,
"value3": 600
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
function createSeries(field, name , linecolor,fillcolor) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
series.stroke = am4core.color(linecolor);
series.fillOpacity = 1;
// Make the legend square
series.legendSettings.markerShape = "square";
series.legendSettings.markerFill = series.stroke.color;
series.legendSettings.markerFill = am4core.color(linecolor);
return series;
}
var series1 = createSeries("value", "Series #1" , "#001739" , "#89CFF0" );
var series2 = createSeries("value2", "Series #2" , "#808080" , "#E5E6E4");
function getSeriesColor(series) {
return series.stroke.color;
}
chart.legend = new am4charts.Legend();
chart.legend.useDefaultMarker = true;
const marker = chart.legend.markers.template;
const markerColumn = marker.children.getIndex(0);
const markerColumnActiveState = markerColumn.states.getKey("active");
// When a legend item is disabled it triggers its active state,
// test it out:
// markerColumnActiveState.properties.strokeWidth = 2;
// markerColumnActiveState.properties.stroke = "#000";
// markerColumnActiveState.properties.strokeOpacity = 1;
// markerColumnActiveState.adapter.add("fill", function() {
// return am4core.color("red");
// });
markerColumn.cornerRadius(0, 0, 0, 0);
markerColumn.defaultState.properties.fill = am4core.color("#000000"); markerColumn.defaultState.properties.fillOpacity = 0;
markerColumn.defaultState.properties.strokeWidth = 1;
markerColumn.defaultState.properties.stroke = am4core.color("#FFFFFF");
markerColumn.defaultState.properties.strokeOpacity = 1;
markerColumn.defaultState.properties.fillOpacity = 1;
chart.cursor = new am4charts.XYCursor();
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 180px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
图表正确显示,图例也出现了我想要的是remove the black
,我只是想显示图例标记为带有1颜色(与线条颜色相同)的计划方形框。
1条答案
按热度按时间n3ipq98p1#
尝试从标记中删除黑色填充。
字符串
x
的字符串