Reactjs 有没有办法在包含多行的折线图中为一条特定的行添加阴影？
我正在尝试为图表中的一条特定直线添加阴影 这在某种程度上有所帮助，但还不够： 我正在react项目中使用Reactjs 有没有办法在包含多行的折线图中为一条特定的行添加阴影？,reactjs,chart.js,Reactjs,Chart.js,我正在尝试为图表中的一条特定直线添加阴影 这在某种程度上有所帮助，但还不够： 我正在react项目中使用“react-chartjs-2”：“2.7.6”。 我想到的是，为所有线条添加了阴影。。我似乎找不到一种方法来为每个数据集添加它 我已将此代码添加到组件willmount中，该组件为所有行添加了阴影（这不是我想要的） 这是我试图构建的代码的一个小示例 import React from 'react'; import mediaPlanner from '../api/mediaPlann
“react-chartjs-2”：“2.7.6”组件willmountimport React from 'react';
import mediaPlanner from '../api/mediaPlanner';
import {Line,Chart} from "react-chartjs-2";
class Revenue extends React.Component{
constructor(props){
super(props);
this.state = {
data: {}
}
this.graphDataSample = {
forecastRevenue: ["3000", "3500", "3500"]
revenue: ["1000", "3000", "5000"]
timestamp: ["2019-02-01", "2019-02-02", "2019-02-03"]
}
// get up the options of the graph
this.options = {
maintainAspectRatio: false,
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: 'rgb(255,255,255)',
}
},
tooltips: {
backgroundColor: "#f5f5f5",
titleFontColor: "#333",
bodyFontColor: "#666",
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.0)",
zeroLineColor: "transparent"
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#9a9a9a"
}
}
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.1)",
zeroLineColor: "transparent"
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}
]
}
};
}
componentWillMount = () => {
// supposed to make an api call to get the data returned
// by graphDataSample
// adds the drop shadow to both revenue and forecast revenue
// I only want to add it to the forecast revenue
Chart.pluginService.register({
id: 'dropShadow',
afterDraw: function (chart, easing) {
console.log(chart);
let originial = this;
const { ctx } = chart;
let originalStroke = ctx.stroke;
ctx.stroke = function () {
ctx.save();
ctx.shadowColor = '#C4A4BF';
ctx.shadowBlur = 7;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
originalStroke.apply(this, arguments)
ctx.restore();
}
}
});
this.setState({data: function(canvas){
return {
labels: this.graphDataSample.timestamp, // X-axis
datasets: [
{
fill: false,
borderColor: "#6C6C74",
borderWidth: 3,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: "#6C6C74",
pointHoverRadius: 0,
pointHoverBorderWidth: 10,
pointBorderWidth: 0,
steppedLine: false,
pointRadius: 0,
label: "Revenue ($)",
data: this.graphDataSample.revenue, // Y-axis
},
{
fill: false,
borderColor: "red",
borderWidth: 3,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: "red",
pointHoverRadius: 0,
pointHoverBorderWidth: 10,
pointBorderWidth: 0,
steppedLine: false,
pointRadius: 0,
label: "Forecast Revenue ($)",
data: this.graphDataSample.forecastRevenue, // Y-axis
}
]
};
}});
}
render() {
return (
<Line
data={this.state.data}
options={this.options}
/>
);
}
}
export default Revenue;
从“React”导入React；
从“../api/mediaPlanner”导入mediaPlanner；
从“react-chartjs-2”导入{Line，Chart}；
类。组件{
建造师（道具）{
超级（道具）；
此.state={
数据：{}
}
this.graphDataSample={
前法院法官：[“3000”、“3500”、“3500”]
收入：[“1000”、“3000”、“5000”]
时间戳：[“2019-02-01”、“2019-02-02”、“2019-02-03”]
}
//获取图形的选项
此选项={
MaintaintAspectRatio:false，
图例：{
显示：对，
位置：'底部'，
标签：{
fontColor:'rgb（255255）'，
}
},
工具提示：{
背景颜色：“F5”，
标题字体颜色：“333”，
bodyFontColor:#666“，
车身间距：4，
加上：12，
模式：“最近的”，
交集：0，
位置：“最近的”
},
回答：是的，
比例：{
雅克斯：[
{
百分比：1.6，
网格线：{
抽边线：假，
颜色：“rgba（29140248,0.0）”，
zeroLineColor:“透明”
},
滴答声：{
建议民:60,，
建议最大值：125，
填充：20，
fontColor:#9a”
}
}
],
xAxes：[
{
百分比：1.6，
网格线：{
抽边线：假，
颜色：“rgba（29140248,0.1）”，
zeroLineColor:“透明”
},
滴答声：{
填充：20，
fontColor:#9a”
}
}
]
}
};
}
组件将装入=（）=>{
//应该进行api调用以获取返回的数据
//通过图形数据样本
//将下降阴影添加到收入和预测收入
//我只想将其添加到预测收入中
Chart.pluginService.register({
id:“dropShadow”，
后拉伸：功能（图表、缓和）{
控制台日志（图表）；
让original=这个；
const{ctx}=图表；
让原始行程=ctx.行程；
ctx.stroke=函数（）{
ctx.save（）；
ctx.shadowColor='#C4A4BF'；
ctx.shadowBlur=7；
ctx.shadowOffsetX=0；
ctx.shadowOffsetY=0；
originalStroke.apply（这个，参数）
ctx.restore（）；
}
}
});
this.setState（{data:function（canvas）{
返回{
标签：this.graphDataSample.timestamp，//X轴
数据集：[
{
填充：假，
边框颜色：“6C6C74”，
边框宽度：3，
borderDash:[]，
borderDashOffset:0.0，
pointBackgroundColor:#6C6C74“，
点半径：0，
pointHoverBorderWidth:10，
pointBorderWidth:0，
草原线：错，
点半径：0，
标签：“收入（$）”，
数据：this.graphDataSample.revenue，//Y轴
},
{
填充：假，
边框颜色：“红色”，
边框宽度：3，
borderDash:[]，
borderDashOffset:0.0，
pointBackgroundColor:“红色”，
点半径：0，
pointHoverBorderWidth:10，
pointBorderWidth:0，
草原线：错，
点半径：0，
标签：“预测收入（$）”，
数据：this.graphDataSample.forecastRevenue，//Y轴
}
]
};
}});
}
render（）{
返回(
);
}
}
出口违约收入；
import React from 'react';
import mediaPlanner from '../api/mediaPlanner';
import {Line,Chart} from "react-chartjs-2";
class Revenue extends React.Component{
constructor(props){
super(props);
this.state = {
data: {}
}
this.graphDataSample = {
forecastRevenue: ["3000", "3500", "3500"]
revenue: ["1000", "3000", "5000"]
timestamp: ["2019-02-01", "2019-02-02", "2019-02-03"]
}
// get up the options of the graph
this.options = {
maintainAspectRatio: false,
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: 'rgb(255,255,255)',
}
},
tooltips: {
backgroundColor: "#f5f5f5",
titleFontColor: "#333",
bodyFontColor: "#666",
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.0)",
zeroLineColor: "transparent"
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#9a9a9a"
}
}
],
xAxes: [
{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: "rgba(29,140,248,0.1)",
zeroLineColor: "transparent"
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}
]
}
};
}
componentWillMount = () => {
// supposed to make an api call to get the data returned
// by graphDataSample
// adds the drop shadow to both revenue and forecast revenue
// I only want to add it to the forecast revenue
Chart.pluginService.register({
id: 'dropShadow',
afterDraw: function (chart, easing) {
console.log(chart);
let originial = this;
const { ctx } = chart;
let originalStroke = ctx.stroke;
ctx.stroke = function () {
ctx.save();
ctx.shadowColor = '#C4A4BF';
ctx.shadowBlur = 7;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
originalStroke.apply(this, arguments)
ctx.restore();
}
}
});
this.setState({data: function(canvas){
return {
labels: this.graphDataSample.timestamp, // X-axis
datasets: [
{
fill: false,
borderColor: "#6C6C74",
borderWidth: 3,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: "#6C6C74",
pointHoverRadius: 0,
pointHoverBorderWidth: 10,
pointBorderWidth: 0,
steppedLine: false,
pointRadius: 0,
label: "Revenue ($)",
data: this.graphDataSample.revenue, // Y-axis
},
{
fill: false,
borderColor: "red",
borderWidth: 3,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: "red",
pointHoverRadius: 0,
pointHoverBorderWidth: 10,
pointBorderWidth: 0,
steppedLine: false,
pointRadius: 0,
label: "Forecast Revenue ($)",
data: this.graphDataSample.forecastRevenue, // Y-axis
}
]
};
}});
}
render() {
return (
<Line
data={this.state.data}
options={this.options}
/>
);
}
}
export default Revenue;