更改 Anychart 雷达图中的线条颜色
Change line color in Anychart radar chart
下面的雷达图中的线条可以加色吗?
anychart.onDocumentReady(function() {
// chart type
var chart = anychart.radar();
// chart title
chart.title().text('Spending');
// series type and data set
chart.line([
{x: "Administration", value:"22"},
{x: "Sales", value:"34"},
{x: "Marketing", value:"16"},
{x: "Research", value:"12"},
{x: "Support", value:"38"},
{x: "Development", value:"47"}
]);
// draw chart
chart.container('container').draw();
});
我试过添加 fill
,但它似乎不起作用
chart.line([
{x: "Administration", value:"22", fill: "#color-code"},
{x: "Sales", value:"34", fill: "#color-code"},
{x: "Marketing", value:"16", fill: "#color-code"},
{x: "Research", value:"12", fill: "#color-code"},
{x: "Support", value:"38", fill: "#color-code"},
{x: "Development", value:"47", fill: "#color-code"}
]);
如Radar Plot: Line所述,这是雷达图上的线系列。
所以后面是Line Chart series settings: and you need to set Stroke,不填,例如:
line = chart.line([
{x: "Administration", value:"22"},
{x: "Sales", value:"34"},
{x: "Marketing", value:"16"},
{x: "Research", value:"12"},
{x: "Support", value:"38"},
{x: "Development", value:"47"}
]);
line.stroke('red 3', 2, 2);
如图所示 Radar Line Chart with Stroke Settings Sample:
chart.palette(["Black", "Green"]);
或者,您可以使用 AnyChart Palette if you need several different lines: AnyChart Palette Multiple Lines Radar Chart
这里还有一个基本示例的片段:
anychart.onDocumentReady(function() {
// chart type
var chart = anychart.radar();
// chart title
chart.title().text('Spending');
// set palette
chart.palette(["Black", "Green"]);
// series type and data set
chart.line([
{x: "Administration", value:"22"},
{x: "Sales", value:"34"},
{x: "Marketing", value:"16"},
{x: "Research", value:"12"},
{x: "Support", value:"38"},
{x: "Development", value:"47"}
]);
// series type and data set
chart.line([
{x: "Administration", value:"32"},
{x: "Sales", value:"44"},
{x: "Marketing", value:"46"},
{x: "Research", value:"42"},
{x: "Support", value:"48"},
{x: "Development", value:"57"}
]);
// draw chart
chart.container('container').draw();
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>
下面的雷达图中的线条可以加色吗?
anychart.onDocumentReady(function() {
// chart type
var chart = anychart.radar();
// chart title
chart.title().text('Spending');
// series type and data set
chart.line([
{x: "Administration", value:"22"},
{x: "Sales", value:"34"},
{x: "Marketing", value:"16"},
{x: "Research", value:"12"},
{x: "Support", value:"38"},
{x: "Development", value:"47"}
]);
// draw chart
chart.container('container').draw();
});
我试过添加 fill
,但它似乎不起作用
chart.line([
{x: "Administration", value:"22", fill: "#color-code"},
{x: "Sales", value:"34", fill: "#color-code"},
{x: "Marketing", value:"16", fill: "#color-code"},
{x: "Research", value:"12", fill: "#color-code"},
{x: "Support", value:"38", fill: "#color-code"},
{x: "Development", value:"47", fill: "#color-code"}
]);
如Radar Plot: Line所述,这是雷达图上的线系列。 所以后面是Line Chart series settings: and you need to set Stroke,不填,例如:
line = chart.line([
{x: "Administration", value:"22"},
{x: "Sales", value:"34"},
{x: "Marketing", value:"16"},
{x: "Research", value:"12"},
{x: "Support", value:"38"},
{x: "Development", value:"47"}
]);
line.stroke('red 3', 2, 2);
如图所示 Radar Line Chart with Stroke Settings Sample:
chart.palette(["Black", "Green"]);
或者,您可以使用 AnyChart Palette if you need several different lines: AnyChart Palette Multiple Lines Radar Chart
这里还有一个基本示例的片段:
anychart.onDocumentReady(function() {
// chart type
var chart = anychart.radar();
// chart title
chart.title().text('Spending');
// set palette
chart.palette(["Black", "Green"]);
// series type and data set
chart.line([
{x: "Administration", value:"22"},
{x: "Sales", value:"34"},
{x: "Marketing", value:"16"},
{x: "Research", value:"12"},
{x: "Support", value:"38"},
{x: "Development", value:"47"}
]);
// series type and data set
chart.line([
{x: "Administration", value:"32"},
{x: "Sales", value:"44"},
{x: "Marketing", value:"46"},
{x: "Research", value:"42"},
{x: "Support", value:"48"},
{x: "Development", value:"57"}
]);
// draw chart
chart.container('container').draw();
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>