使用chart.js的折线图显示了太多的工具提示框

时间:2018-11-26 16:41:39

标签: javascript html chart.js

我的图形显示正常,但是当我将鼠标悬停在数据点上时,会出现多个框,而不仅仅是一个。我试图将模式设置为索引,并将相交设置为true,以便仅显示1个工具提示,但这并没有执行任何操作。当我将鼠标悬停在特定数据点上时,我只希望显示一个框。任何提示>

这是我在脚本标记内的html文件中的代码         

            var options = {
                tooltips: {
            mode: 'dataset',
                intersect: true
            }
            }

      var barData = {
        labels : [
          {% for item in labels %}
            "{{ item | round(1) }}",
          {% endfor %}
        ],
        datasets : [{
          fillColor: "rgba(255,255,255,0)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          bezierCurve : false,
          data : [
                {% for item in values1 %}
            {{ item | round(1) }},
          {% endfor %}]
          }
              ]
          }
      Chart.defaults.global.animationSteps = 50;
      Chart.defaults.global.tooltipsenabled = true;
      Chart.defaults.global.tooltipsYPadding = 1;
      Chart.defaults.global.hoverMode = "index";
      Chart.defaults.global.hoverintersect = true;
      Chart.defaults.global.tooltipsCornerRadius = 1;
      Chart.defaults.global.tooltipstitleFontStyle = 'bold';
      Chart.defaults.global.tooltipsFillColor = "rgba(0,0,0,0.8)";
      Chart.defaults.global.animationEasing = "easeOutBounce";
      Chart.defaults.global.responsive = false;
      Chart.defaults.global.scaleLineColor = "black";
      Chart.defaults.global.scaleFontSize = 16;
      // get bar chart canvas
      var mychart = document.getElementById("chart1").getContext("2d");
      steps = 10
      max = {{ max1 }}
      // draw bar chart
      var LineChartDemo = new Chart(mychart).Line(barData, {
                scaleOverride: true,
        scaleSteps: steps,
        scaleStepWidth: Math.ceil(max / steps),
        scaleStartValue: 0,
        scaleShowVerticalLines: true,
        scaleShowGridLines : true,
        barShowStroke : true,
        scaleShowLabels: true,
        bezierCurve: false,
      });
    </script>

Screenshot of too many tool tips showing up when mouse hovers over

0 个答案:

没有答案
相关问题