如何在高图中的x轴的两个间隔之间添加虚线
How to add dotted lines between two interval of x-axis in hightcharts
我试图在 x 轴的间隔之间添加虚线,但找不到任何东西。谁能帮忙?
如何实现?我在 React.js 中使用 HighCharts。有没有属性可以做到这一点?
import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
//import HighchartsReact from "./HighchartsReact.js";
import HighchartsReact from "highcharts-react-official";
class App extends React.Component {
constructor(props) {
super(props);
this.chart1 = React.createRef();
this.chart2 = React.createRef();
const maxQuantity = 700;
var maxSet = 0;
this.state = {
chartOptions1: {
title: {
enabled: true,
text: "Quantity of Standard calling plan - cloud user(s)"
},
tooltip: {
enabled: true,
useHTML: true,
formatter: function () {
if (maxSet !== 0) {
maxSet += 1;
return (
"<div class='test-tooltip'>" +
"<div class='text-bold'>Highest quantity :" +
this.y +
"</div>" +
"<div class='text-regular'> Total:" +
"<span class='text-bold'> .19 </span>" +
"</div>" +
"<div class='text-regular'> Set: 30 Nov 19 </div>" +
"</div>"
);
} else {
return null;
}
}
},
plotOptions: {
series: {
color: "#0064D2"
},
line: {
dataLabels: {
enabled: true,
useHTML: true,
y: -10,
x: -4,
formatter: function () {
if (this.y === maxQuantity && maxSet === 0) {
maxSet += 1;
console.log(this);
return (
"<div class='test-tooltip'>" +
"<div class='text-bold'>Highest quantity :" +
this.y +
"</div>" +
"<div class='text-regular'> Total:" +
"<span class='text-bold'> .19 </span>" +
"</div>" +
"<div class='text-regular'> Set: 30 Nov 19 </div>" +
"</div>"
);
}
}
}
}
},
chart: {
height: 400
},
legend: {
enabled: false
},
xAxis: {
title: {
text: "Date"
},
tickInterval: 24 * 3600 * 1000 * 5,
units: [["day", [1, 5]]],
text: "Date",
type: "datetime",
crosshair: true,
dashStyle: "dash",
labels: {
formatter: function () {
return Highcharts.dateFormat("%e %b", this.value);
}
}
},
yAxis: {
title: {
text: "Quantity"
}
},
series: [
{
pointStart: Date.UTC(2011, 10, 15),
id: "someid",
data: [
[Date.UTC(2012, 10, 15), 400],
[Date.UTC(2012, 10, 20), 400],
[Date.UTC(2012, 10, 25), 400],
[Date.UTC(2012, 10, 30), 400],
[Date.UTC(2012, 10, 35), 700],
[Date.UTC(2012, 10, 35), 600],
[Date.UTC(2012, 10, 35), 650],
[Date.UTC(2012, 10, 35), 400],
[Date.UTC(2012, 10, 40), 700],
[Date.UTC(2012, 10, 45), 700]
]
}
]
// series: [
// {
// id: 'someId',
// data: [1, 1, 3]
// }
// ]
},
chartOptions2: {
chart: {
height: 400
},
plotOptions: {
series: {
events: {
legendItemClick: (function (component) {
return function () {
const chart = component.chart1.current.chart;
const series = chart.get(this.options.id);
if (series) {
if (this.visible) {
series.hide();
} else {
series.show();
}
}
};
})(this)
}
}
},
series: [
{
id: "someId",
data: [1, 2, 3]
}
]
}
};
}
render() {
return (
<div>
<HighchartsReact
highcharts={Highcharts}
options={this.state.chartOptions1}
ref={this.chart1}
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));
这是我试过的。我能够实现间隔,但不能实现中间的虚线。我添加了图片以及它的外观。
谢谢你的代码!有了它,找到解决方案就容易多了,似乎将 tickInterval
更改为一天并将 yAxis.labels.step
设置为 5 应该可以满足您的要求。
演示:https://jsfiddle.net/BlackLabel/4x1v726j/
xAxis: {
title: {
text: "Date"
},
tickInterval: 24 * 3600 * 1000,
units: [
["day", [1, 5]]
],
text: "Date",
type: "datetime",
crosshair: true,
dashStyle: "dash",
labels: {
step: 5,
formatter: function() {
return Highcharts.dateFormat("%e %b", this.value);
}
}
},
API: https://api.highcharts.com/highcharts/xAxis.labels.step
我试图在 x 轴的间隔之间添加虚线,但找不到任何东西。谁能帮忙?
如何实现?我在 React.js 中使用 HighCharts。有没有属性可以做到这一点?
import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
//import HighchartsReact from "./HighchartsReact.js";
import HighchartsReact from "highcharts-react-official";
class App extends React.Component {
constructor(props) {
super(props);
this.chart1 = React.createRef();
this.chart2 = React.createRef();
const maxQuantity = 700;
var maxSet = 0;
this.state = {
chartOptions1: {
title: {
enabled: true,
text: "Quantity of Standard calling plan - cloud user(s)"
},
tooltip: {
enabled: true,
useHTML: true,
formatter: function () {
if (maxSet !== 0) {
maxSet += 1;
return (
"<div class='test-tooltip'>" +
"<div class='text-bold'>Highest quantity :" +
this.y +
"</div>" +
"<div class='text-regular'> Total:" +
"<span class='text-bold'> .19 </span>" +
"</div>" +
"<div class='text-regular'> Set: 30 Nov 19 </div>" +
"</div>"
);
} else {
return null;
}
}
},
plotOptions: {
series: {
color: "#0064D2"
},
line: {
dataLabels: {
enabled: true,
useHTML: true,
y: -10,
x: -4,
formatter: function () {
if (this.y === maxQuantity && maxSet === 0) {
maxSet += 1;
console.log(this);
return (
"<div class='test-tooltip'>" +
"<div class='text-bold'>Highest quantity :" +
this.y +
"</div>" +
"<div class='text-regular'> Total:" +
"<span class='text-bold'> .19 </span>" +
"</div>" +
"<div class='text-regular'> Set: 30 Nov 19 </div>" +
"</div>"
);
}
}
}
}
},
chart: {
height: 400
},
legend: {
enabled: false
},
xAxis: {
title: {
text: "Date"
},
tickInterval: 24 * 3600 * 1000 * 5,
units: [["day", [1, 5]]],
text: "Date",
type: "datetime",
crosshair: true,
dashStyle: "dash",
labels: {
formatter: function () {
return Highcharts.dateFormat("%e %b", this.value);
}
}
},
yAxis: {
title: {
text: "Quantity"
}
},
series: [
{
pointStart: Date.UTC(2011, 10, 15),
id: "someid",
data: [
[Date.UTC(2012, 10, 15), 400],
[Date.UTC(2012, 10, 20), 400],
[Date.UTC(2012, 10, 25), 400],
[Date.UTC(2012, 10, 30), 400],
[Date.UTC(2012, 10, 35), 700],
[Date.UTC(2012, 10, 35), 600],
[Date.UTC(2012, 10, 35), 650],
[Date.UTC(2012, 10, 35), 400],
[Date.UTC(2012, 10, 40), 700],
[Date.UTC(2012, 10, 45), 700]
]
}
]
// series: [
// {
// id: 'someId',
// data: [1, 1, 3]
// }
// ]
},
chartOptions2: {
chart: {
height: 400
},
plotOptions: {
series: {
events: {
legendItemClick: (function (component) {
return function () {
const chart = component.chart1.current.chart;
const series = chart.get(this.options.id);
if (series) {
if (this.visible) {
series.hide();
} else {
series.show();
}
}
};
})(this)
}
}
},
series: [
{
id: "someId",
data: [1, 2, 3]
}
]
}
};
}
render() {
return (
<div>
<HighchartsReact
highcharts={Highcharts}
options={this.state.chartOptions1}
ref={this.chart1}
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));
这是我试过的。我能够实现间隔,但不能实现中间的虚线。我添加了图片以及它的外观。
谢谢你的代码!有了它,找到解决方案就容易多了,似乎将 tickInterval
更改为一天并将 yAxis.labels.step
设置为 5 应该可以满足您的要求。
演示:https://jsfiddle.net/BlackLabel/4x1v726j/
xAxis: {
title: {
text: "Date"
},
tickInterval: 24 * 3600 * 1000,
units: [
["day", [1, 5]]
],
text: "Date",
type: "datetime",
crosshair: true,
dashStyle: "dash",
labels: {
step: 5,
formatter: function() {
return Highcharts.dateFormat("%e %b", this.value);
}
}
},
API: https://api.highcharts.com/highcharts/xAxis.labels.step