Question

我创建了一个Spline图表。我想让图表上的数据点闪烁？任何人都可以建议我如何做到这一点？我正在使用canvasjs的示例图表。

我的代码是：

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <script type="text/javascript">
    window.onload = function() {
      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "sample"
        },
        animationEnabled: true,
        axisY: {
          titleFontFamily: "arial",
          titleFontSize: 12,
          includeZero: false
        },
        toolTip: {
          shared: true
        },
        data: [{
          type: "spline",
          name: "test1",
          showInLegend: true,
          dataPoints: [{
            label: "abc",
            y: 44
          }, {
            label: "def",
            y: 37
          }, {
            label: "ghi",
            y: 34
          }, {
            label: "jkl",
            y: 36
          }, {
            label: "mno",
            y: 46
          }]
        }, {
          type: "spline",
          name: "test2",
          showInLegend: true,
          dataPoints: [{
            label: "abc",
            y: 16
          }, {
            label: "def",
            y: 28
          }, {
            label: "ghi",
            y: 32
          }, {
            label: "jkl",
            y: 51
          }, {
            label: "mno",
            y: 38
          }]
        }, {
          type: "spline",
          name: "test3",
          showInLegend: true,
          dataPoints: [{
            label: "abc",
            y: 1
          }, {
            label: "def",
            y: 11
          }, {
            label: "ghi",
            y: 9
          }, {
            label: "jkl",
            y: 19
          }, {
            label: "mno",
            y: 29
          }]
        }]
      });

      chart.render();
    }
  </script>
  <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>

<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

</html>

＆＃13;

请建议我如何在鼠标悬停时使图表上的数据点闪烁.. 或者请建议我使用此功能的任何其他图表设计师..

Answer 1

兰芝斯，

您可以使用鼠标事件，markerColor和setInterval来执行此操作，如jsfiddle所示。

var chart = new CanvasJS.Chart("chartContainer", {
    title : {
        text : "sample"
    },
    animationEnabled : true,
    axisY : {
        titleFontFamily : "arial",
        titleFontSize : 12,
        includeZero : false
    },
    toolTip : {
        shared : true
    },
    data : [{
            type : "spline",
            name : "test1",
            mouseover: blink,
            mouseout: stop,
            showInLegend : true,
            dataPoints : [
                {label : "abc",y : 44}, 
                {label : "def",y : 37}, 
                {label : "ghi",y : 34}, 
                {label : "jkl",y : 36}, 
                {label : "mno",y : 46}              
            ]
        }, {
            type : "spline",
            name : "test2",
            mouseover: blink,
            mouseout: stop,
            showInLegend : true,
            dataPoints : [
                {label : "abc",y : 16}, 
                {label : "def",y : 28}, 
                {label : "ghi",y : 32}, 
                {label : "jkl",y : 51}, 
                {label : "mno",y : 38}

            ]
        }, {
            type : "spline",
            name : "test3",
            mouseover: blink,
            mouseout: stop,
            showInLegend : true,
            dataPoints : [
                {label : "abc",y : 1}, 
                {label : "def",y : 11}, 
                {label : "ghi",y : 9}, 
                {label : "jkl",y : 19}, 
                {label : "mno",y : 29}

            ]
        }
    ]
});

var blinkId = null;

function blink(e){
    var dataSeries = e.dataSeries;

    dataSeries.markerColor = "red";
    chart.render();

    blinkId = setInterval(function(){
        if( dataSeries.markerColor === "red"){
            delete dataSeries.markerColor;
        }else
            dataSeries.markerColor = "red";

        chart.render();
    },500);
}

function stop(e){
    clearInterval(blinkId);

    delete e.dataSeries.markerColor;
    chart.render();
}

chart.render();

如何使样条图数据点闪烁？

1 个答案: