想要将 y 轴刻度设置为固定值 Highcharts
Want to set the y axis ticks to a fixed value Highcharts
我正在尝试基于数据点的折线图和面积图的组合。
在图 1 中,Y 轴看起来很笨拙,有很多刻度。有没有一种方法可以将这些刻度设置为 y 轴上的“3”。这对于任何数据点都应该保持不变,刻度应该始终为 3
同样在图 2 中,有一条额外的水平线,低于 0。有什么办法可以避免它,所以参考总是从 0 而不是低于 0 的线。
沙盒link:https://codesandbox.io/s/react-line-chart-n9g6o?file=/src/LineChart.js
import * as React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HC_exporting from "highcharts/modules/exporting";
HC_exporting(Highcharts);
function LineChart(props) {
let chartOptions = {
chart: {
type: "line",
height: props.height
},
legend: {
align: "center",
verticalAlign: "bottom",
x: 0,
y: 0
},
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
let self = this;
let formattedString = "<small></small><table>";
self.points.forEach(elem => {
formattedString +=
'<tr><td style="color: {series.color}">' +
elem.series.name +
": </td>";
formattedString +=
'<td style="text-align: right"><b>' +
elem.y +
" (" +
elem.point.ts +
")</b></td></tr>";
});
return formattedString;
}
},
colors: props.legendColor,
xAxis: {
visible: true,
step: 1,
tickInterval: 6,
categories: props.categories
},
yAxis: {
visible: true,
step: 1,
tickInterval: 1,
title: {
enabled: true,
text: "Value",
style: {
fontWeight: "100"
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: "none"
}
},
line: {
marker: {
enabled: false
}
}
},
series: props.chartData
};
return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}
export default LineChart;
In Graph 1, Y axis looks clumsy with lot of ticks. Is there a way
where these ticks can be set to may be "3" on y axis. This should
remain constant for any data points, ticks should always 3
使用tickAmount
属性:
yAxis: {
tickAmount: 3,
..
}
API参考:https://api.highcharts.com/highcharts/yAxis.tickAmount
Also in the graph 2, there is an extra horizontal line, below 0. Is
there any way I could avoid it, so that reference is always from 0
than having lines below 0.
是的,您可以设置 softMax
属性。如果只有 0 个值,Highcharts 无法计算轴刻度。
yAxis: {
softMax: 1,
...
}
我正在尝试基于数据点的折线图和面积图的组合。
在图 1 中,Y 轴看起来很笨拙,有很多刻度。有没有一种方法可以将这些刻度设置为 y 轴上的“3”。这对于任何数据点都应该保持不变,刻度应该始终为 3
同样在图 2 中,有一条额外的水平线,低于 0。有什么办法可以避免它,所以参考总是从 0 而不是低于 0 的线。
沙盒link:https://codesandbox.io/s/react-line-chart-n9g6o?file=/src/LineChart.js
import * as React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HC_exporting from "highcharts/modules/exporting";
HC_exporting(Highcharts);
function LineChart(props) {
let chartOptions = {
chart: {
type: "line",
height: props.height
},
legend: {
align: "center",
verticalAlign: "bottom",
x: 0,
y: 0
},
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
let self = this;
let formattedString = "<small></small><table>";
self.points.forEach(elem => {
formattedString +=
'<tr><td style="color: {series.color}">' +
elem.series.name +
": </td>";
formattedString +=
'<td style="text-align: right"><b>' +
elem.y +
" (" +
elem.point.ts +
")</b></td></tr>";
});
return formattedString;
}
},
colors: props.legendColor,
xAxis: {
visible: true,
step: 1,
tickInterval: 6,
categories: props.categories
},
yAxis: {
visible: true,
step: 1,
tickInterval: 1,
title: {
enabled: true,
text: "Value",
style: {
fontWeight: "100"
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: "none"
}
},
line: {
marker: {
enabled: false
}
}
},
series: props.chartData
};
return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}
export default LineChart;
In Graph 1, Y axis looks clumsy with lot of ticks. Is there a way where these ticks can be set to may be "3" on y axis. This should remain constant for any data points, ticks should always 3
使用tickAmount
属性:
yAxis: {
tickAmount: 3,
..
}
API参考:https://api.highcharts.com/highcharts/yAxis.tickAmount
Also in the graph 2, there is an extra horizontal line, below 0. Is there any way I could avoid it, so that reference is always from 0 than having lines below 0.
是的,您可以设置 softMax
属性。如果只有 0 个值,Highcharts 无法计算轴刻度。
yAxis: {
softMax: 1,
...
}