jquery 如何在图例标记中应用线条描边颜色

vhipe2zx  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(99)

我正在绘制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颜色(与线条颜色相同)的计划方形框。

n3ipq98p

n3ipq98p1#

尝试从标记中删除黑色填充。

markerColumn.defaultState.properties.fill = am4core.color("#000000");

字符串

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();

x

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>

的字符串

相关问题