增加 Anychart 散点图中特定标记点的大小
Increase size of specific marker points in Anychart scatter charts
我正在使用 AnyChart
创建散点图
anychart.onDocumentReady(function () {
var data_1 = [["1", "82"], ["1", "90"], ["1", "78"], ["1", "86"], ["1", "86"], ["1", "88"], ["1", "86"], ["2", "87"], ["2", "90"], ["2", "87"], ["2", "90"], ["2", "67"], ["2", "90"], ["2", "77"], ["3", "82"], ["3", "96"], ["3", "82"], ["3", "80"], ["3", "93"], ["3", "67"], ["3", "87"], ["4", "66"], ["4", "91"], ["4", "71"], ["4", "77"], ["4", "77"], ["4", "80"], ["4", "83"], ["5", "76"], ["5", "82"], ["5", "62"], ["5", "78"], ["5", "84"], ["5", "78"], ["5", "76"]],
chart = anychart.scatter();
var series1 = chart.marker(data_1);
series1.tooltip()
.hAlign('start')
.format(function () {
return 'Value: ' + this.value;
});
chart.getSeriesAt(0).name("Score");
chart.xScale().minimum(0).ticks().interval(1);
chart.xAxis(0).drawFirstLabel(false).drawLastLabel(false);
xLabels = chart.xAxis().labels();
xLabels.format(function (x) {
var xLabel;
xLabel = x.value;
return xLabel;
});
xLabels.fontSize(10);
xLabels.width(60);
xLabels.height(25);
xLabels.textOverflow("...");
xLabels.hAlign("center");
chart.xGrid(true);
chart.yGrid(true);
chart.xMinorGrid(true);
chart.yMinorGrid(true);
chart.yScale().minimum(40);
chart.yScale().maximum(100);
chart.container('container');
chart.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>
我正在尝试增加图表上特定标记点的大小。
例如:对应x值“1”我们有三个“86”y值。
["1", "82"], ["1", "90"], ["1", "78"], ["1", "86"], ["1", "86"], ["1", "88"], ["1", "86"]
因此我需要以更大的尺寸显示该标记点。怎么可能?
您是否需要根据值确定大小的不同类型的标记,或者您正在寻找气泡图 https://playground.anychart.com/teKDUPCH?
var series1 = chart.bubble(data_1);
chart.maxBubbleSize(20);
chart.minBubbleSize(1);
anychart.onDocumentReady(function () {
var data_1 = [
{x: "1", value: "82", size: "1"},
{x: "1", value: "90", size: "1"},
{x: "1", value: "78", size: "1"},
{x: "1", value: "86", size: "3"},
{x: "1", value: "88", size: "1"},
{x: "2", value: "87", size: "2"},
{x: "2", value: "90", size: "3"},
{x: "2", value: "67", size: "1"},
{x: "2", value: "77", size: "1"},
{x: "3", value: "82", size: "2"},
{x: "3", value: "96", size: "1"},
{x: "3", value: "80", size: "1"},
{x: "3", value: "93", size: "1"},
{x: "3", value: "67", size: "1"},
{x: "3", value: "87", size: "1"},
{x: "4", value: "66", size: "1"},
{x: "4", value: "91", size: "1"},
{x: "4", value: "71", size: "1"},
{x: "4", value: "77", size: "2"},
{x: "4", value: "80", size: "1"},
{x: "4", value: "83", size: "1"},
{x: "5", value: "76", size: "2"},
{x: "5", value: "82", size: "1"},
{x: "5", value: "62", size: "1"},
{x: "5", value: "78", size: "2"},
{x: "5", value: "84", size: "1"},
];
var chart = anychart.bubble(data_1);
chart.tooltip()
.hAlign('start')
.format(function () {
return 'Value: ' + this.value + '\n' + 'Count: ' + this.size;
});
chart.getSeriesAt(0).name("Score");
chart.minBubbleSize("2%");
chart.maxBubbleSize("4%");
chart.xScale().minimum(0).ticks().interval(1);
chart.xAxis(0).drawFirstLabel(false).drawLastLabel(false);
xLabels = chart.xAxis().labels();
xLabels.format(function (x) {
var xLabel;
xLabel = x.value;
return xLabel;
});
xLabels.fontSize(10);
xLabels.width(60);
xLabels.height(25);
xLabels.textOverflow("...");
xLabels.hAlign("center");
chart.xGrid(true);
chart.yGrid(true);
chart.xMinorGrid(true);
chart.yMinorGrid(true);
chart.yScale().minimum(40);
chart.yScale().maximum(100);
chart.container('container');
chart.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
创建散点图anychart.onDocumentReady(function () {
var data_1 = [["1", "82"], ["1", "90"], ["1", "78"], ["1", "86"], ["1", "86"], ["1", "88"], ["1", "86"], ["2", "87"], ["2", "90"], ["2", "87"], ["2", "90"], ["2", "67"], ["2", "90"], ["2", "77"], ["3", "82"], ["3", "96"], ["3", "82"], ["3", "80"], ["3", "93"], ["3", "67"], ["3", "87"], ["4", "66"], ["4", "91"], ["4", "71"], ["4", "77"], ["4", "77"], ["4", "80"], ["4", "83"], ["5", "76"], ["5", "82"], ["5", "62"], ["5", "78"], ["5", "84"], ["5", "78"], ["5", "76"]],
chart = anychart.scatter();
var series1 = chart.marker(data_1);
series1.tooltip()
.hAlign('start')
.format(function () {
return 'Value: ' + this.value;
});
chart.getSeriesAt(0).name("Score");
chart.xScale().minimum(0).ticks().interval(1);
chart.xAxis(0).drawFirstLabel(false).drawLastLabel(false);
xLabels = chart.xAxis().labels();
xLabels.format(function (x) {
var xLabel;
xLabel = x.value;
return xLabel;
});
xLabels.fontSize(10);
xLabels.width(60);
xLabels.height(25);
xLabels.textOverflow("...");
xLabels.hAlign("center");
chart.xGrid(true);
chart.yGrid(true);
chart.xMinorGrid(true);
chart.yMinorGrid(true);
chart.yScale().minimum(40);
chart.yScale().maximum(100);
chart.container('container');
chart.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>
我正在尝试增加图表上特定标记点的大小。
例如:对应x值“1”我们有三个“86”y值。
["1", "82"], ["1", "90"], ["1", "78"], ["1", "86"], ["1", "86"], ["1", "88"], ["1", "86"]
因此我需要以更大的尺寸显示该标记点。怎么可能?
您是否需要根据值确定大小的不同类型的标记,或者您正在寻找气泡图 https://playground.anychart.com/teKDUPCH?
var series1 = chart.bubble(data_1);
chart.maxBubbleSize(20);
chart.minBubbleSize(1);
anychart.onDocumentReady(function () {
var data_1 = [
{x: "1", value: "82", size: "1"},
{x: "1", value: "90", size: "1"},
{x: "1", value: "78", size: "1"},
{x: "1", value: "86", size: "3"},
{x: "1", value: "88", size: "1"},
{x: "2", value: "87", size: "2"},
{x: "2", value: "90", size: "3"},
{x: "2", value: "67", size: "1"},
{x: "2", value: "77", size: "1"},
{x: "3", value: "82", size: "2"},
{x: "3", value: "96", size: "1"},
{x: "3", value: "80", size: "1"},
{x: "3", value: "93", size: "1"},
{x: "3", value: "67", size: "1"},
{x: "3", value: "87", size: "1"},
{x: "4", value: "66", size: "1"},
{x: "4", value: "91", size: "1"},
{x: "4", value: "71", size: "1"},
{x: "4", value: "77", size: "2"},
{x: "4", value: "80", size: "1"},
{x: "4", value: "83", size: "1"},
{x: "5", value: "76", size: "2"},
{x: "5", value: "82", size: "1"},
{x: "5", value: "62", size: "1"},
{x: "5", value: "78", size: "2"},
{x: "5", value: "84", size: "1"},
];
var chart = anychart.bubble(data_1);
chart.tooltip()
.hAlign('start')
.format(function () {
return 'Value: ' + this.value + '\n' + 'Count: ' + this.size;
});
chart.getSeriesAt(0).name("Score");
chart.minBubbleSize("2%");
chart.maxBubbleSize("4%");
chart.xScale().minimum(0).ticks().interval(1);
chart.xAxis(0).drawFirstLabel(false).drawLastLabel(false);
xLabels = chart.xAxis().labels();
xLabels.format(function (x) {
var xLabel;
xLabel = x.value;
return xLabel;
});
xLabels.fontSize(10);
xLabels.width(60);
xLabels.height(25);
xLabels.textOverflow("...");
xLabels.hAlign("center");
chart.xGrid(true);
chart.yGrid(true);
chart.xMinorGrid(true);
chart.yMinorGrid(true);
chart.yScale().minimum(40);
chart.yScale().maximum(100);
chart.container('container');
chart.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>