如何使 react-highchart 线型保持固定？

Question

每次我在我的textarea中输入一些东西时，下图中的黑线不断地重新渲染数据。如何让它保持固定？下面是显示图表 table 和文本区域代码的代码。我正在使用 CKEditor js 库来显示来自 textarea 的工具。我还对显示的图表使用了 react-highcharts。

谢谢。

为我的 HIGHCHART 配置

const config = {
  /* HighchartsConfig */

title: {
    text: ''
},

xAxis: {
    tickLength: 75,
    categories: [month1, month2, month3, month4],
    labels: {
      style: {
        color: 'black',
        fontSize:'13px'

      },
      formatter: function(){

      return '<span style="margin-right: 9px">' + this.chart.series[0].options.stack + '</span><span>' + this.chart.series[1].options.stack + 
      '</span><br /><div style="text-align:center"> <br />' + this.value + '</div> '
    },    
    useHTML: true
  } 
},

yAxis: [{ //--- Primary yAxis
  title: {
      text: 'Bugs, Questions And Enhancements'
  }
}, { //--- Secondary yAxis
  title: {
      text: 'Total Open'
  },
  opposite: true
}],

tooltip: {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
    }
},
plotOptions: {
    column: {
        stacking: 'normal',
        allowPointSelect: false,

    },


},
legend: {
  events: {
    legendItemClick: function () {

       return false; 
       // <== returning false will cancel the default action
        }
    },
      itemStyle: {

          fontSize: '17px'
      }
},
credits: {
  enabled: false
},
series: 
[{
    yAxis: 0,
    type: 'column',
    name: 'bug',
    data: [5, 3, 4, 7],
    color: '#1E90FF',
    stack: 'Open'

},
 {
    yAxis: 0,
    type: 'column',
    name: 'bug',
    color: '#1E90FF',
    data: [1, 4, 4, 0],
    showInLegend: false,
    stack: 'Closed'
}, 
{
  yAxis: 0,
  type: 'column',
  name: 'question',
  color: '#DC143C',
  data: [5, 3, 4, 7],
  stack: 'Open'
}, 
{
  yAxis: 0,
  type: 'column',
  name: 'question',
  color: '#DC143C',
  data: [3, 4, 4, 0],
  showInLegend: false,
  stack: 'Closed'
},
{
  yAxis: 0,
  type: 'column',
  name: 'enhancement',
  color: '#32CD32',
  data: [5, 3, 4, 7],
  stack: 'Open'
},
{ 
  yAxis: 0,
  type: 'column',
  name: 'enhancement',
  color: '#32CD32',
  data: [3, 4, 4, 0],
  showInLegend: false,
  stack: 'Closed'
},{
    yAxis: 1,
    type: 'line',
    name: 'Total Open',
    color: '#2C2727',
    data: [3,7, 3, 25],
    lineWidth: 4.5,
    marker: {
      enabled: false
    }
  }


]};

正在渲染图表的未解决问题的代码

 <div className="openIssues"> 
               <div className="col-auto mb-3"> 
                <Card style={{width: '105.7%',height:'42.7rem'}} className="text-center">
                  <CardHeader color="orange"> <h3>Open Issues</h3></CardHeader>
                  <CardBody>
                  <div className="row">
                    <div class="col-sm-6">
                    <ReactHighcharts config = {config} ref="chart"></ReactHighcharts> 

                    </div>

                    <div class="col-sm-1">
                      <p > 
                          <ul className="center"> 
                                <li> Total Open: {this.state.totalOpen}  </li>
                                &nbsp;&nbsp;&nbsp; &nbsp;- {this.state.nbrOfQuestions} Questions <br/> 
                                &nbsp;&nbsp;&nbsp; &nbsp;- {this.state.nbrOfEnhancements} Enhancements <br/>
                                &nbsp;&nbsp;&nbsp; &nbsp;- {this.state.nbrOfBugs} Bugs <br/>
                                <li> Resolved in the last cycle: {this.state.nbrOfResolvedInLastCycle} </li>
                                <li> Opened in the last cycle:&nbsp;&nbsp;&nbsp;{this.state.nbrOfOpeneInLastCycle}</li>
                                <li> {this.state.nbrOfP1} Open P1 </li>
                                <li> {this.state.nbrOfP2} Open P2 </li>
                         </ul> 
                      </p> 


                    <br/>
                      <p> 

                        <table className="tableOpenIssues">
                            <caption><h3 align="center"> Open Tickets Creation Date Distribution </h3></caption>
                            <thead>         
                              <th>This cycle</th>
                              <th>1 to 3 months</th>
                              <th>3 to 6 months</th>
                              <th>6 to 12 months</th>
                              <th>More than 1 year</th>
                            </thead>

                          <tbody>

                           <tr>
                             <td>1</td>
                             <td>1</td>
                             <td>1</td>
                             <td>1</td>
                             <td>1</td> 
                          </tr>


                         </tbody>

                       </table>

                      </p>
                    </div>

                  </div>


                  </CardBody>

                </Card>
                </div>

维护版本文本区域代码

<div className="maintenanceRelease"> 
                <Card style={{width: '70rem',height:'22.5rem'}} className="text-center">
                  <CardHeader color="blue"> <h3>Maintenance Releases</h3></CardHeader>
                  <CardBody>
                    <CKEditor 
                        activeClass="maintenance"
                        content={this.state.maintenanceContent} 
                        events={{
                          "change": this.onChangeMaintenance
                        }}
                        config= {{removeButtons: 'Undo,Redo,Select,PasteText,PasteFromWord,HiddenField,CreateDiv,Cut,Copy,Paste,Source,Format,Maximize,Anchor,Superscript,Subscript,RemoveFormat,About,Strike,Blockquote,Table,ShowBlocks, Find, specialChars,HorizontalRule,select', height: 167,
                                  removePlugins: 'resize,elementspath,save,image,flash,iframe,link,smiley,tabletools,find,pagebreak,templates,about,maximize,showblocks,newpage,language,scayt,wsc,select,specialchar, magicline',
                                  autoParagraph: false
                                }}


                      />
                  </CardBody>

                </Card>
 </div>

Answer 1

您正在使用 'react-highcharts' 包装器，这会导致在每次 setState 后重新绘制图表。您可以将 line 系列的 animation 选项设置为 false，但更好的解决方案是使用 'highcharts-react-official' 包装器，它仅在图表选项发生变化时更新图表。

{
  yAxis: 1,
  type: "line",
  name: "Total Open",
  color: "#2C2727",
  data: [3, 7, 3, 25],
  lineWidth: 4.5,
  animation: false,  // new property
  marker: {
    enabled: false
  }
}

现场演示：https://codesandbox.io/s/olq3lmp92y

如何使 react-highchart 线型保持固定？

How to make the react-highchart line type stay fixed?

reactjs

highcharts

react-highcharts