Grafana Apache图表中的非标准X轴和Y轴缩放

Question

我试图复制这个(散点)图表与非标准的x和y轴使用Apache Echarts内部Grafana:复制的图表

然而，通过文档和例子，我找不到一种方法来在轴上有自定义比例。有什么简单的方法吗?或者唯一的选择是必须有SVG地图和转换坐标取决于区域?有没有其他的Grafana工具可以让它变得更简单?

我也试过用对数标度，但是我不能让它看起来像原始材料。

Answer 1

在图表中获得您想要的最简单的解决方案是转换数字轴到类别，这基本上意味着将所有数据转换为字符串。

const xStepValues = [0, 1, 2, 10, 100],
yStepValues = [0, 1, 10, 25, 50];
const dataSets = [
[
[0, 25],
[1, 10],
[1, 0]
],
[
[0, 50],
[1, 50],
[2, 25],
[2, 0]
],
[
[0, 50],
[2, 50],
[10, 25],
[10, 0]
],
[
[0, 50],
[100, 50]
]
].map(dataSet=>dataSet.map(([x, y])=>[''+x, y+'%']));
const option = {
legend: {
show: false,
},
tooltip:{
show: false
},
xAxis: {
//type: 'category',
data: xStepValues.map(x=>''+x), 
boundaryGap: false,
z: 50,
splitLine:{
show: true, z:100,
lineStyle:{color:'#888', width:2}
}
},
yAxis: {
//type: 'category',
data:yStepValues.map(y=>y+'%'), 
boundaryGap: false,
z: 50,
splitLine:{
show: true,
lineStyle:{color:'#888', width:2}
}
},
series: [
{
type: 'line',
data: dataSets[0],
lineStyle: {
opacity: 0,
},
symbolSize: 0,
areaStyle: {
color: '#284',
opacity: 1,
},
z: 40
},
{
type: 'line',
data: dataSets[1],
lineStyle: {
opacity: 0,
},
symbolSize: 0,
areaStyle: {
color: '#4d8',
opacity: 1,
},
z: 30
},
{
type: 'line',
data: dataSets[2],
lineStyle: {
opacity: 0,
},
symbolSize: 0,
areaStyle: {
color: '#ed4',
opacity: 1,
},
z: 20
},
{
type: 'line',
data: dataSets[3],
lineStyle: {
opacity: 0,
},
symbolSize: 0,
areaStyle: {
color: '#d23',
opacity: 1,
},
z: 10
},
],
};
const myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:100vh"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

---

这是最简单的解决方案;它只适用于基本功能——它只能处理坐标轴标签上的x和y值，它不能处理中间点。如果需要中间值，则必须考虑一种不那么简单的解决方案——实现某种形式的自定义轴投影。

由于echarts似乎不允许在用户领域调整其内部结构，我们必须做下一个最好的事情-假装它。这意味着我们将真实的数据——写在坐标轴标签上的数据——转换为"假的"数据;数据——这些标签实际放置的位置，它们在坐标轴上的位置。我们将使用实空间和虚空间之间的分段线性映射，这似乎是OP在这种情况下所做的假设。其他映射也可以实现——分段对数、高阶样条等。

那么，假设前两个标签('0'和'1')在真空间和假空间中是相同的(我们可以自由地在假空间中选择其他值，但这个似乎是最自然的一个)，这个表示第三个标签，'10'将放置在假位置2，第四个标签'25'将放置在假位置4，以此类推。

在x轴上，真实数据0, 1, 2, 10, 100被转换为假数据0, 1, 2, 3, 4，在y轴上，真实数据0, 1, 10, 25, 50被转换为假数据0, 1, 2, 3, 4——这意味着假数据将成为真实标签数据数组中的索引。在它们之间，我们使用左和右标签应用线性插值-例如，实x值6介于2和10之间，因此在伪空间中，它将出现在fake(2) = 2和fake(10) = 3之间，即2.5。

下面是这个版本的代码片段:

const xStepValues = [0, 1, 2, 10, 100],
yStepValues = [0, 1, 10, 25, 50],
// transform step values to their indices
true2fake = trueValues => function(x){
for(let i = 0; i < xStepValues.length-1; i++){
if(x >= trueValues[i] && x <= trueValues[i+1]){
// linear interpolation between two consecutive trueValues
return i + (x-trueValues[i])/(trueValues[i+1]-trueValues[i]);
}
}
throw new Error(`Invalid x value ${x}`);
};
const dataSets = [
{
data: [
[0, 25], [1, 10], [1, 0]
],
color:'#284',
z: 40 // top-most
},
{
data:[
[0, 50], [1, 50], [2, 25], [2, 0]
],
color:'#4d8',
z: 30
},
{
data:[
[0, 50], [2, 50], [10, 25], [10, 0]
],
color:'#ed4',
z: 20
},
{
data:[
[0, 50], [100, 50]
],
color:'#d23',
z: 10 // bottom-most
}
];
const point = {data: [4, 45.25], color: '#44f', z: 50};
const fakeX = x => true2fake(xStepValues)(x),
fakeY = y => true2fake(yStepValues)(y),
fakeXY = ([x, y])=>[fakeX(x), fakeY(y)];
const option = {
legend: {
show: false,
},
tooltip:{
show: false
},
xAxis: {
minInterval: 1,
maxInterval: 1,
axisLabel: {
formatter: function(index, value){
return xStepValues[value];
}
},
boundaryGap: false,
z: 50,
splitLine:{
show: true, z:100,
lineStyle:{color:'#888', width:2}
}
},
yAxis: {
minInterval: 1,
maxInterval: 1,
axisLabel: {
formatter: function(index, value){
return yStepValues[value]+'%';
}
},
boundaryGap: false,
z: 50,
splitLine:{
show: true,
lineStyle:{color:'#888', width:2}
}
},
series: Array.from({length: dataSets.length}, // colored areas
(_, i) => ({
type: 'line',
data: dataSets[i].data.map(fakeXY),
lineStyle: {
opacity: 0,
},
symbolSize: 0,
areaStyle: {
color: dataSets[i].color,
opacity: 1,
},
z: dataSets[i].z
})).concat([{ // the point
type: 'scatter',
symbolSize: 10,
itemStyle:{
color: point.color,
opacity: 1,
},
data: [fakeXY(point.data)],
z: point.z
}])
};
const myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:100vh"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>