highcharts 样条图 - 大数据应仅绘制特定数据

如何解决highcharts 样条图 - 大数据应仅绘制特定数据

我创建了一个只有 12 个月数据的样条曲线高图（参考：演示示例 1）并且能够完美地绘制它，因为当有大 - 36 或 60 个月的数据时（参考：演示示例 2）我需要每季度绘制一次数据如（2020 年 3 月、2020 年 6 月、2020 年 9 月、2020 年 12 月等...）我该如何实现？

演示示例 1：https://jsfiddle.net/hdaqg45f/1/

演示代码 1：

var plotBands = [
            {
                color: 'rgb(204,0)',from: 0,to: 30.99,zIndex: 3
            },{
                color: 'rgb(226,113,113)',from: 31,to: 44.99,{
                color: 'rgb(247,209,34)',from: 45,to: 54.99,{
                color: 'rgb(136,207,136)',from: 55,to: 68.99,{
                color: 'rgb(68,180,68)',from: 69,to: 87.99,{
                color: 'rgb(0,153,from: 88,to: 100,zIndex: 3
            }
        ];
    
    var dates = ['Mar-2020','Apr-2020','May-2020','Jun-2020','Jul-2020','Aug-2020','Sep-2020','Oct-2020','Nov-2020','Dec-2020','Jan-2021','Feb-2021'];
    
    var chartdata = [
        {
        color: "rgb(0,187,221)",data: [50,15,52,54,56,51,85,96,53,55,57],date: dates,name: 'RiskGauge score',type: 'spline'
      },{
        color: "rgb(154,2,42)",data: [12,14,18,16,23,27,29,42,16],name: 'United States of America Median',type: 'spline'
      }
    ]
    
    Highcharts.chart('container',{
        chart: {
          marginTop: 10,height: 250
        },title: {
          text: null
        },credits: {
          enabled: false
        },legend: {
          align: "center",layout: "horizontal",verticalAlign: "bottom",alignColumns: false,itemdistance: 4,symbolHeight: 18,symbolWidth: 18,itemStyle: {
            fontSize: "11px !important"
          }
        },xAxis: {
          categories: chartdata[0].date,labels: {
            style: {
              fontSize: "11px !important",color: "#000"
            }
          },gridLineColor: "transparent",gridlinewidth: 0,linewidth: 0,minorGridlinewidth: 0,lineColor: "transparent",minorTickLength: 0,tickLength: 0,style: {
            fontSize: "15px !important",color: "#000"
          }
        },yAxis: [
          {
            min: 0,max: 100,width: 20,tickInterval: 20,plotBands: plotBands,style: {
              fontSize: "10px",color: "red"
            },title: {
              text: ""
            },labels: {
              style: {
                fontWeight: 'bold',color: 'black',},formatter: function () {
                  return this.value;
                }
            },{
            linkedTo: 0,gridLineColor:'white',labels: {
              enabled:false,],plotOptions: {
          series: {
            states: {
              hover: {
                enabled: true
              },inactive: {
                opacity: 1
              }
            },enableMouseTracking: true,borderWidth: 1,borderColor: "#FFFFFF",threshold: 0,// let zero values have some height
            marker: {
              enabled: true
            },minPointLength: 10
          }
        },tooltip: {
          useHTML: false,shared: false,followPointer: false
        },series: chartdata
      });

演示示例 2：https://jsfiddle.net/hdaqg45f/s

演示代码 2：

var plotBands = [
        {
            color: 'rgb(204,zIndex: 3
        },{
            color: 'rgb(226,{
            color: 'rgb(247,{
            color: 'rgb(136,{
            color: 'rgb(68,{
            color: 'rgb(0,zIndex: 3
        }
    ];

var dates = ['Mar-2020','Feb-2021','Mar-2021','Apr-2021','May-2021','Jun-2021','Jul-2021','Aug-2021','Sep-2021','Oct-2021','Nov-2021','Dec-2021','Jan-2022','Feb-2022','Mar-2022','Apr-2022','May-2022','Jun-2022','Jul-2022','Aug-2022','Sep-2022','Oct-2022','Nov-2022','Dec-2022','Jan-2023','Feb-2023'];

var chartdata = [
    {
    color: "rgb(0,57,50,type: 'spline'
  },{
    color: "rgb(154,12,type: 'spline'
  }
]

Highcharts.chart('container',{
    chart: {
      marginTop: 10,height: 250
    },title: {
      text: null
    },credits: {
      enabled: false
    },legend: {
      align: "center",itemStyle: {
        fontSize: "11px !important"
      }
    },xAxis: {
      categories: chartdata[0].date,labels: {
        style: {
          fontSize: "11px !important",color: "#000"
        }
      },style: {
        fontSize: "15px !important",color: "#000"
      }
    },yAxis: [
      {
        min: 0,style: {
          fontSize: "10px",color: "red"
        },title: {
          text: ""
        },labels: {
          style: {
            fontWeight: 'bold',formatter: function () {
              return this.value;
            }
        },{
        linkedTo: 0,labels: {
          enabled:false,plotOptions: {
      series: {
        states: {
          hover: {
            enabled: true
          },inactive: {
            opacity: 1
          }
        },// let zero values have some height
        marker: {
          enabled: true
        },minPointLength: 10
      }
    },tooltip: {
      useHTML: false,followPointer: false
    },series: chartdata
  });

    

解决方法

您需要将数据转换为所需的时间段 - 只需跳过每三个值或对接下来的三个值求和。实现示例：

it.ozimov:embedded-redis

---

现场演示： https://jsfiddle.net/BlackLabel/wav86bm5/