个人中心
gpt4 book ai didi

javascript - 如何将图中绘制的最低点的点颜色更改为红色，第二个问题是 ie10、ie8 不支持动画效果

转载 作者：行者123 更新时间：2023-12-03 11:52:29 24 4
gpt4 key购买 nike

我正在制作 Highcharts 以实现动态，这就是图表:

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>RNA</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="http://code.highcharts.com/modules/exporting.js"></script>

    <script type="text/javascript" src="regression.js"></script>

    <script>
    $(function () {
        var sourceData = [
              [0, 99.43], [1, 99.40],
              [2, 99.24], [3, 99.40],
              [4, 99.21], [5, 99.45],
              [6, 99.41], [7, 99.18],
              [8, 99.36], [9, 99.31],
              [10, 99.38], [11, 99.20],
            [12, 99.38], [13, 99.32]
          ];
    $('#container').highcharts({
              title: {
                  text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
                  x: -20 //center
              },
              tooltip: {
                  formatter: function () {

                          if(this.series.name == 'Series 2'){
                          return false ;
                      }
                      //console.log(this.point.extprop);
                      var s = 'The value for <b>' + this.x +
                          '</b> is <b>' + this.y + '</b>';
                      if (this.point.extprop) {
                          s += 'for <b>' + this.point.extprop + '</b>';
                      }
                      return s;
                  }
              },
              subtitle: {
                  text: '',
                  x: -20
              },
              xAxis: {
                  categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14', '20-Jul-14'],
                  labels:{rotation: 40, x:-20}
              },
              yAxis: {
                  title: {
                      text: 'Percent'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              legend: {
                  layout: 'vertical',
                  //align: 'right',
                  //verticalAlign: 'middle',
                  borderWidth: 0
              },
              series: [{
                  name: 'RNA',
                  data: [{
                      x: 0,
                      y: 99.43,
                      extprop: 'power issue'
                  }, {
                      x: 1,
                      y: 99.40,
                      extprop: 'flood'
                  }, {
                      x: 2,
                      y: 99.24,
                      extprop: 'power issue'
                  }, {
                      x: 3,
                      y: 99.40,
                      extprop: 'flood'
                  }, {
                      x: 4,
                      y: 99.21,
                      extprop: 'power issue'
                  }, {
                      x: 5,
                      y: 98.45,
                      extprop: 'flood'
                  }, {
                      x: 6,
                      y: 98.41,
                      extprop: 'power issue'
                  }, {
                      x: 7,
                      y: 99.18,
                      extprop: 'flood'
                  }, {
                      x: 8,
                      y: 99.36,
                      extprop: 'power issue'
                  }, {
                      x: 9,
                      y: 99.31,
                      extprop: 'flood'
                  }, {
                      x: 10,
                      y: 99.38,
                      extprop: 'power issue'
                  }, {
                      x: 11,
                      y: 99.20,
                      extprop: 'flood'
                  }, {
                      x: 12,
                      y: 99.38,
                      extprop: 'power issue'
                  }, {
                      x: 13,
                      y: 99.32,
                      extprop: 'flood'
                  }]
              },{
                    type: 'line',
                    marker: { enabled: false },
                    /* function returns data for trend-line */
                    data: (function() {
                      return fitData(sourceData).data;
                    })()
                }],
              credits: {
                  enabled: false
              }
          });

        });

    </script>

<body>
<div id="container" style="height: 400px"></div>
</body>
</html>

这是链接，我正在做这个项目，实际上我有两个问题。

1.如何将趋势线下方的点颜色改为红色。2.如何使点和日期直线对齐，即点位于日期之间。3.当页面在Internet Explorer 10或8中加载时，图表不显示动画效果，就像在Chrome和Mozilla中加载动画效果的图表绘制一样，而IE10，IE8现在显示动画效果。 ？

这是屏幕截图:

enter image description here

在上图中，用圆圈突出显示的点变为红色点，第二个是绘制指向日期的线，该线必须与点直线对齐。

请帮忙。谢谢

最佳答案

抱歉回复晚了，您的两个问题都通过一些小的修改解决了，对于所有的红点，您需要指定它们的color: 'red'如:

{
   x: 11,
   y: 99.20,
   color: 'red',
   extprop: 'flood'
}

另一个问题是由于指定 xAxis 类别造成的。所以我把它们放在外面并使用格式化程序来填充 xAxis 标签，还使用了 tickInterval: 1

xAxis: {
    labels:{
        rotation: 90,
        align: "left",
        formatter: function () {
            return dates[this.value];
        },
    },
    tickInterval: 1
},

<强> See the working DEMO here

关于javascript - 如何将图中绘制的最低点的点颜色更改为红色，第二个问题是 ie10、ie8 不支持动画效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25761044/

24 4 0
文章推荐： javascript - Google map 上未显示带有信息窗口的多个标记
文章推荐： javascript - 仅在 safari 中使用 javascript 验证
文章推荐： javascript - 如何有选择地显示 Chrome 扩展程序的工具栏图标？
文章推荐： javascript - 从父代 ID 中选择第 n 个子代
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com