Amcharts X和Y轴在数据点处截取

Question

我们希望平移光标默认出现在am-charts中的所有数据点上。

平移光标仅出现在我创建的图表中的光标突出显示的数据点上

图表应如下图所示

我尝试了以下代码。
默认情况下，平移光标应出现在图表中的所有数据点。如果可以，请告诉我

 <apex:page sidebar="false" showHeader="false"  >
        <script src="/soap/ajax/32.0/connection.js" type="text/javascript"></script>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <c:HR_HeadComponent ></c:HR_HeadComponent>

         <apex:includeScript value="{!$Resource.core1}"/>
         <apex:includeScript value="{!$Resource.chart}"/>  
         <apex:includeScript value="{!$Resource.animated}"/>  




    <div id="chartdiv" class="chartdiv" ></div>
        <style>
        .chartdiv {
         margin-left:120px;
          margin-top:140px;
         width: 50%;
         height: 350px;

         background: #A281E4;
        </style>



    <script>


    // Themes begin

        // m4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.XYChart);


    chart.data = [{
      "values": "669,326",
      "income": 0.00,
      "expenses": 0.00,

      "lineColor": "#0E0E0E"
    }, {
      "values": "669,427",
      "income": 50,
      "expenses": 50
    }, {
      "values": "735,618",
      "income": 100,
      "expenses": 100
    }, 
    {
      "values": "753,170",
      "income": 126.52,
      "expenses": 126.52,

    },{
      "values": "801,809",
      "income": 200,
      "expenses": 200
    }];

    //Creating axis 






    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.ticks.template.disabled = false;
    categoryAxis.renderer.line.opacity = 0;

    categoryAxis.renderer.grid.template.disabled = true;
    categoryAxis.renderer.minGridDistance = 0;
    categoryAxis.dataFields.category = "values";
    categoryAxis.renderer.labels.template.disabled = false;
    chart.maskBullets = false;
    categoryAxis.startLocation = 0.4;
    categoryAxis.endLocation = 0.6;




    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.ticks.template.disabled = true;
    valueAxis.renderer.labels.template.disabled = false;
    valueAxis.tooltip.disabled = false;
    chart.maskBullets = false;






        //creating series
    var lineSeries = chart.series.push(new am4charts.LineSeries());
    lineSeries.dataFields.categoryX = "values";
    lineSeries.dataFields.valueY = "income";
    lineSeries.tooltipText = " MXP: ${categoryX} MXP,KPI Results:{valueY.value}";
    lineSeries.strokeWidth = 2;
    lineSeries.minBulletDistance = 15;
    lineSeries.strokeWidth = 2;

    // Drop-shaped tooltips
    lineSeries.tooltip.background.cornerRadius = 30;
    lineSeries.tooltip.background.strokeOpacity = 0;
    lineSeries.tooltip.pointerOrientation = "vertical";
    lineSeries.tooltip.label.minWidth = 40;
    lineSeries.tooltip.label.minHeight = 40;
    lineSeries.tooltip.label.textAlign = "middle";
    lineSeries.tooltip.label.textValign = "middle";

    //bullets grow on hover
    var bullet = lineSeries.bullets.push(new am4charts.CircleBullet());
    bullet.circle.strokeWidth = 2;
    bullet.circle.radius = 4;
    bullet.circle.fill = am4core.color("#fff");

    // Make a panning cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.behavior = "panXY";
    chart.cursor.xAxis = categoryAxis;
    chart.cursor.snapToSeries = lineSeries;
    chart.cursor.lineColor = "#D8E63C";





    </script>
         <apex:include pageName="HR_GlobalHeader"/>
         <apex:form >
              <div>

        <div id="chartdiv" class="chartdiv"  />
             </div>
     </apex:form> 

</apex:page>