[英]Change the line color in a JavaScript line chart made by amCharts
我正在使用 amCharts 創建帶有 amCharts 的 JavaScript 折線圖。 amCharts 是一個很棒的開源第三方插件,類似於 chart.js 用於數據可視化,但其 javascript 代碼令人困惑。
在演示折線圖中,我想將線條的顏色從藍色更改為紅色(或任何其他顏色)。 與 chart.js 不同,我沒有在演示圖表中找到允許我添加顏色參數的地方。 本演示折線圖HTML中的JavaScript
編碼為:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
#chartdiv {
height: 500px;
}
</style>
</head>
<body>
<div id="selectordiv"></div>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
</div>
<div class="card-body">
<div class="chart-line">
<div id="chartdiv"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<script src="https://cdn.amcharts.com/lib/4/plugins/rangeSelector.js"></script>
<script>
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
var data = [];
var visits = 10;
for (var i = 1; i < 50000; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({
date: new Date(2018, 0, i),
value: visits
});
}
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.minZoomCount = 5;
dateAxis.groupData = true;
dateAxis.groupCount = 500;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
var scrollbarX = new am4core.Scrollbar();
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;
var selector = new am4plugins_rangeSelector.DateAxisRangeSelector();
selector.container = document.getElementById("selectordiv");
selector.axis = dateAxis;
// Add DatePicker
selector.events.on("drawn", function(ev) {
$(".amcharts-range-selector-range-wrapper input").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function() {
selector.updateZoom();
}
});
});
</script>
</body>
</html>
使用屬性stroke: am5.color('hexColor')
var series = chart.series.push(
am5xy.LineSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
valueXField: "date",
stroke: am5.color('#f00'), // this property
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}",
}),
})
);
參考: https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/ & https://www.amcharts.com/docs/v5/concepts/colors-gradients-and -模式/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.