改变xValue展览

Question

我有这个图，其中我在最小值和最大值上放置了一些标记（带状线）。我只想在标记上显示 xValue，以使图表更具可读性。

在此图中，我使用的间隔为 50，我的 xAxis 数据设置不正确。我想做的是仅在标记出现的地方显示 xAxis 上的值。有没有属性可以做到这一点？我在文档中找不到它。

这是我生成图表的代码

const options = {
  theme: "light2", // "light1", "dark1", "dark2"
  animationEnabled: true,
  zoomEnabled: false,
  toolTip:{
    enabled: false,
    },
  axisX: [{
    crosshair: { 
    enabled: true
    }, 
    stripLines:[
    {                
      value: marker[0],
      thickness: 2,
      label: ""
    },
    {                
      value: marker[1],
      thickness: 2,
      label: ""
    },
    ],  
    //title: "X title 1",
    //margin: 20,
    valueFormatString: "DD/MMM/YY" ,
    labelMaxWidth: 70,
    //labelWrap: true,
    interval: 50,
    titleFontColor:"#7680B2",
    lineColor:"#7680B2",
    tickColor:"#7680B2",
    labelFontColor:"#7680B2",
    lineThickness: 2,
  },
  {
    //title: "X title 2",
    margin: 0,
    valueFormatString: "DD/MMM/YY" ,
    //zlabelWrap: true,
    interval: 50,
    titleFontColor:"#62D2A9",
    lineColor:"#62D2A9",
    tickColor:"#62D2A9",
    labelFontColor:"#62D2A9",
    lineThickness: 2,

  }],
  axisY: {
    includeZero: false
  },
  data: [
    {
    color:"#7680B2",
    type: "spline",
    axisXIndex: 0,
    xValueType: "dateTime",

    dataPoints: dataPoints,
  },
    {
    color:"#62D2A9",
    type: "spline",
    axisXIndex: 1,
    xValueType: "dateTime",

    dataPoints: dataPoints2,
  },

]
}
  return (
    <div className="ChartWithZoom">
      <h1>Longe do pico</h1>
      <CanvasJSChart options = {options} 
      /* onRef={ref => this.chart = ref} */
      />
    </div>
  );

Answer 1

我想我找到了解决方法，有一个函数可以处理这种情况，labelFormatter: function ( e )，这是我的解决方案：

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
  axisX:{
    interval: 1,
    intervalType: 'day',
    labelFormatter: function ( e ) {
      let data = CanvasJSReact.CanvasJS.formatDate(e.value, "DD/MMM/YY");
      
      //marker is an array that I get the dates for the marker
      let minMarker = CanvasJSReact.CanvasJS.formatDate(marker[0], "DD/MMM/YY");
      let maxMarker = CanvasJSReact.CanvasJS.formatDate(marker[1], "DD/MMM/YY");
      if ( data === minMarker || data === maxMarker ) {
        return CanvasJSReact.CanvasJS.formatDate(e.value, "DD/MMM/YY");
      } else {
        return "";
    }
};  
  },
 .
 .
});
chart.render();

e: { // parameter sent to function
       chart,
       axis,
       value,
       label
 }

这是结果：

改变xValue展览

Change xValue exhibition

javascript

canvasjs