0

我正在尝试在我的应用程序中实现 React-Highcharts。我找不到在 x axios (HH:MM) 中设置时间的方法，我目前以毫秒为单位 (xx:xx:xx:xxx)。每个间隔必须在一分钟内增加（例如 12:00、12:01、12:02 等...）另一方面，在 Y axios 上，我需要它从 0 开始，然后增加 0.1。关于如何做到这一点的任何想法？谢谢！

这是代码：

const options = {
  title: {
    text: ""
  },
  yAxis: [
    {

      // Primary yAxis
      labels: {
        style: {
          color: Highcharts.getOptions().colors[1],
        }
      },
      title: {
        text: "Starting Time",
        style: {
          color: Highcharts.getOptions().colors[1]
        }
      },

    },
    {
      // Secondary yAxis
      title: {
        text: "Usuarios",
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      labels: {
        style: {
          color: Highcharts.getOptions().colors[0]
        }
      },
      opposite: true
    },

  ],
  legend: {
    enabled: false
  },
  xAxis: {
    gridLineWidth: 0,
    type: "datetime",
    timeformat: "%h:%M",
    timezone: "America/Buenos_Aires",
    title: {
      text: ""
    }
  },

  plotOptions: {
    spline: {
        lineWidth: 2,
        states: {
               hover: {
                  lineWidth: 3
               }
        },
        marker: {
               enabled: false,
               states: {
                  hover: {
                     enabled: true,
                     symbol: 'circle',
                     radius: 5,
                     lineWidth: 1
                  }
               }   
        },
     }
  }, 

  series:[{
    name: 'Usuarios',
    type: 'spline',
    yAxis: 1,
    data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,29,37,52,68,86,117,144,213,217,319,258,268,259,258,275,341,363,287,358,780,696,648,713,576,143,531,0,617,421,394,433,504,443,523,651,769,451,812,1183,1652,743,737,1026,1107,760,885,683,909,719,859,636,786,793,851,806,835,872,950,980,922,1022,892,1146,760,1134,1318,1063,1497,1015,1122,1337,1170,1562,860,763,794,1233,1222,1006,1248,1180,1469,954,1405,1126,1338,939,809,991,1499,1565,1315,1090,1249,1014,623,945,1022,1331,2072,761,747,719,908,926,1461,1379,1393,1365,1291,1263,1245,1213,1271,1297,1193,1193,1092,1116,1051,1013,842,618,739,699,634,214,508,480,322,412,128,111,91,131,128,98,65,51,37,32,20,8,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  },
  {
    name: 'Starting Time',
    type: 'spline',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 939,809,991,1499,1565,1315, 1090,1249,1014,623,945,1022,1331,2072,761,747,719],
}],

  responsive: {
    rules: [
      {
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: "horizontal",
            align: "center",
            verticalAlign: "bottom"
          }
        }
      }
    ]
  }
};
4

1 回答 1

0

您没有提供x数据值，因此您的点有 1 毫秒的间隔。作为解决方案，您可以设置pointInterval为 1 秒：

plotOptions: {
    spline: {
        pointInterval: 1000,
        ...
    }
}

现场演示：http: //jsfiddle.net/BlackLabel/2pxwk49d/

API 参考： https ://api.highcharts.com/highcharts/series.area.pointInterval

于 2019-08-02T09:55:22.193 回答