如何使用时间序列数据绘制带有高图的散点图

时间:2016-10-11 15:04:32

标签: javascript charts highcharts

我正在尝试使用时间序列数据创建带有样条曲线和散点图的组合图表。时间序列是时间戳。我不知道为什么,但没有错误信息。虽然样条线渲染,但我没有看到任何散点图。

js fiddle:

var colors = ["#e74c3c", "#f4a582", "#92c5de", "#2980b9"];

Highcharts.chart('container', {
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {

        crosshairs: {
          width: 2,
          color: 'gray',
          dashStyle: 'shortdot'
        },
        formatter: function() {
          var s = '<b>' + moment(this.x).format('MMM Do') + '</b>';



          $.each(this.points, function() {

            s += '<br/>' +
              '<tr><td class = "tooltipvalue" style="color: ' + '#00000' + '">' +
              this.series.name + ': ' +

              this.y.toFixed(1) +
              '</td></tr>';
          });

          return s;
        },
        shared: true


      },
      xAxis: {
        gridLineWidth: 0,
        type: 'datetime',

        tickPositions: [1454329239000, 1465906839000, 1468844439000, 1469708439000, 1474892439000, 1476879639000, 1478607639000],
        labels: {
          style: {

            fontSize: '0.75em'
          },
          formatter: function() {
            return Highcharts.dateFormat('%b %e', this.value);
          }
        },

        title: {
          text: 'x-axis',
          align: 'high',
          offset: 0,
          rotation: 0,
          y: -14

        },
        plotBands: [{
          from: new Date('2016/02/01').getTime(),
          to: new Date('2016/06/14').getTime(),
          color: 'rgb(243, 243, 243)',
          zindex: 0,
          label: {
            text: 'oo',
            style: {
              color: '#606060'
            }
          }
        }, { // Light air

          from: new Date('2016/07/18').getTime(),
          to: new Date('2016/07/28').getTime(),
          color: 'rgb(243, 243, 243)',
          zindex: 0,
          label: {
            text: 'Cv',
            style: {
              color: '#606060'
            }
          }
        }, { // Light air

          from: new Date('2016/09/26').getTime(),
          to: new Date('2016/10/19').getTime(),
          color: 'rgb(243, 243, 243)',
          zindex: 0,
          label: {
            text: 'abc',
            style: {
              color: '#606060'
            }
          }
        }],

      },
      yAxis: {
        gridLineWidth: 0,
        allowDecimals: false,
        labels: {
          enabled: true,
          formatter: function() {
            return this.value + "%";
          },
        },
        lineWidth: 1,
        //  lineColor:'black'
        title: {
          text: 'y-axis',
          align: 'middle'

        },
        plotLines: [{
          color: 'silver',
          width: 0.7,
          value: 50,
          zIndex: 4
        }]

      },


      series: [{
          type: 'spline',
          name: 'Combined forecasts one',
          identifier: 'cc',
          method: 'PollyVote Combined forecasts',
          color: colors[3],
          data: [[1451862000000,52.2],[1451948400000,52.2],[1452034800000,52.2],[1452121200000,52.2],[1452207600000,52.2],[1452294000000,52.2],[1452380400000,52.2],[1452466800000,52.2],[1452553200000,52.2],[1452639600000,52.2],[1452726000000,52.2],[1452812400000,52.2],[1452898800000,52.2],[1452985200000,52.2],[1453071600000,52.2],[1453158000000,52.2],[1453244400000,52.2],[1453330800000,52.2],[1453417200000,52.2],[1453503600000,52.2],[1453590000000,52.2],[1453676400000,52.2],[1453762800000,52.2],[1453849200000,52.2]],
          lineWidth: 3,
          marker: {
            symbol: 'circle'
          }
        },

        {
          type: 'spline',
          name: 'Combined forecasts Two',
          identifier: 'tt',
          method: 'PollyVote Combined forecasts',
          color: colors[0],
          data: [[1451862000000,49.9],[1451948400000,49.9],[1452034800000,49.8],[1452121200000,49.5],[1452207600000,49.4],[1452294000000,49.3],[1452380400000,49.2],[1452466800000,49.6],[1452553200000,49.6],[1452639600000,49.6],[1452726000000,49],[1452812400000,48.7],[1452898800000,48.7],[1452985200000,48.7],[1453071600000,48.7],[1453158000000,48.6],[1453244400000,48.6],[1453330800000,48.6],[1453417200000,48.6],[1453503600000,48.6],[1453590000000,48.6],[1453676400000,48.6],[1453762800000,48.7],[1453849200000,48.8],[1453935600000,48.8],[1454022000000,48.7]],
          lineWidth: 3,
          marker: {
            symbol: 'circle'
          }
        }, {
          type: 'scatter',
          name: 'Index Models one',
          identifier: 'cc',
          method: 'Index models',
          color: colors[2],
          data: [[1451862000000,49.9],[1451948400000,49.9],[1452034800000,49.9],[1452121200000,49.9],[1452207600000,49.9],[1452294000000,49.9],[1452380400000,49.9],[1452466800000,49.9],[1452553200000,49.9],[1452639600000,49.9],[1452726000000,49.9],[1452812400000,51.6],[1452898800000,51.6],[1452985200000,51.6],[1453071600000,51.6],[1453158000000,51.6],[1453244400000,51.6],[1453330800000,51.6],[1453417200000,51.6],[1453503600000,51.6],[1453590000000,51.6],[1453676400000,51.6],[1453762800000,51.6],[1453849200000,51.6],[1453935600000,51.6],[1454022000000,51.6]]
        },

        {
          type: 'scatter',
          name: 'Index Models Two',
          identifier: 'tt',
          method: 'Index models',
          color: colors[1],
          data: [[1451862000000,50.1],[1451948400000,50.1],[1452034800000,50.1],[1452121200000,50.1],[1452207600000,50.1],[1452294000000,50.1],[1452380400000,50.1],[1452466800000,50.1],[1452553200000,50.1],[1452639600000,50.1],[1452726000000,50.1],[1452812400000,48.4],[1452898800000,48.4],[1452985200000,48.4],[1453071600000,48.4],[1453158000000,48.4],[1453244400000,48.4],[1453330800000,48.4],[1453417200000,48.4],[1453503600000,48.4],[1453590000000,48.4],[1453676400000,48.4],[1453762800000,48.4],[1453849200000,48.4],[1453935600000,48.4]]
        }
        ]


      });

1 个答案:

答案 0 :(得分:1)

只需从全局空间中删除已启用false的标记即可解决问题

js fiddle

var colors = [“#e74c3c”,“#f4a582”,“#92c5de”,“#2980b9”];

Highcharts.chart('container', {

  legend: {
    enabled: false
  },
  tooltip: {

    crosshairs: {
      width: 2,
      color: 'gray',
      dashStyle: 'shortdot'
    },
    formatter: function() {
      var s = '<b>' + moment(this.x).format('MMM Do') + '</b>';



      $.each(this.points, function() {

        s += '<br/>' +
          '<tr><td class = "tooltipvalue" style="color: ' + '#00000' + '">' +
          this.series.name + ': ' +

          this.y.toFixed(1) +
          '</td></tr>';
      });

      return s;
    },
    shared: true


  },
  xAxis: {
    gridLineWidth: 0,
    type: 'datetime',

    tickPositions: [1454329239000, 1465906839000, 1468844439000, 1469708439000, 1474892439000, 1476879639000, 1478607639000],
    labels: {
      style: {

        fontSize: '0.75em'
      },
      formatter: function() {
        return Highcharts.dateFormat('%b %e', this.value);
      }
    },

    title: {
      text: 'x-axis',
      align: 'high',
      offset: 0,
      rotation: 0,
      y: -14

    },
    plotBands: [{
      from: new Date('2016/02/01').getTime(),
      to: new Date('2016/06/14').getTime(),
      color: 'rgb(243, 243, 243)',
      zindex: 0,
      label: {
        text: 'oo',
        style: {
          color: '#606060'
        }
      }
    }, { // Light air

      from: new Date('2016/07/18').getTime(),
      to: new Date('2016/07/28').getTime(),
      color: 'rgb(243, 243, 243)',
      zindex: 0,
      label: {
        text: 'Cv',
        style: {
          color: '#606060'
        }
      }
    }, { // Light air

      from: new Date('2016/09/26').getTime(),
      to: new Date('2016/10/19').getTime(),
      color: 'rgb(243, 243, 243)',
      zindex: 0,
      label: {
        text: 'abc',
        style: {
          color: '#606060'
        }
      }
    }],

  },
  yAxis: {
    gridLineWidth: 0,
    allowDecimals: false,
    labels: {
      enabled: true,
      formatter: function() {
        return this.value + "%";
      },
    },
    lineWidth: 1,
    //  lineColor:'black'
    title: {
      text: 'y-axis',
      align: 'middle'

    },
    plotLines: [{
      color: 'silver',
      width: 0.7,
      value: 50,
      zIndex: 4
    }]

  },


  series: [{
      type: 'spline',
      name: 'Combined forecasts one',
      identifier: 'cc',
      method: 'PollyVote Combined forecasts',
      color: colors[3],
      data: [
        [1451862000000, 52.2],
        [1451948400000, 52.2],
        [1452034800000, 52.2],
        [1452121200000, 52.2],
        [1452207600000, 52.2],
        [1452294000000, 52.2],
        [1452380400000, 52.2],
        [1452466800000, 52.2],
        [1452553200000, 52.2],
        [1452639600000, 52.2],
        [1452726000000, 52.2],
        [1452812400000, 52.2],
        [1452898800000, 52.2],
        [1452985200000, 52.2],
        [1453071600000, 52.2],
        [1453158000000, 52.2],
        [1453244400000, 52.2],
        [1453330800000, 52.2],
        [1453417200000, 52.2],
        [1453503600000, 52.2],
        [1453590000000, 52.2],
        [1453676400000, 52.2],
        [1453762800000, 52.2],
        [1453849200000, 52.2]
      ],
      lineWidth: 3,
      marker: {
        enabled: false
      }
    },

    {
      type: 'spline',
      name: 'Combined forecasts Two',
      identifier: 'tt',
      method: 'PollyVote Combined forecasts',
      color: colors[0],
      data: [
        [1451862000000, 49.9],
        [1451948400000, 49.9],
        [1452034800000, 49.8],
        [1452121200000, 49.5],
        [1452207600000, 49.4],
        [1452294000000, 49.3],
        [1452380400000, 49.2],
        [1452466800000, 49.6],
        [1452553200000, 49.6],
        [1452639600000, 49.6],
        [1452726000000, 49],
        [1452812400000, 48.7],
        [1452898800000, 48.7],
        [1452985200000, 48.7],
        [1453071600000, 48.7],
        [1453158000000, 48.6],
        [1453244400000, 48.6],
        [1453330800000, 48.6],
        [1453417200000, 48.6],
        [1453503600000, 48.6],
        [1453590000000, 48.6],
        [1453676400000, 48.6],
        [1453762800000, 48.7],
        [1453849200000, 48.8],
        [1453935600000, 48.8],
        [1454022000000, 48.7]
      ],
      lineWidth: 3,
      marker: {
        enabled: false
      }
    }, {
      type: 'scatter',
      name: 'Index Models one',
      identifier: 'cc',
      method: 'Index models',
      color: colors[2],
      data: [
        [1451862000000, 49.9],
        [1451948400000, 49.9],
        [1452034800000, 49.9],
        [1452121200000, 49.9],
        [1452207600000, 49.9],
        [1452294000000, 49.9],
        [1452380400000, 49.9],
        [1452466800000, 49.9],
        [1452553200000, 49.9],
        [1452639600000, 49.9],
        [1452726000000, 49.9],
        [1452812400000, 51.6],
        [1452898800000, 51.6],
        [1452985200000, 51.6],
        [1453071600000, 51.6],
        [1453158000000, 51.6],
        [1453244400000, 51.6],
        [1453330800000, 51.6],
        [1453417200000, 51.6],
        [1453503600000, 51.6],
        [1453590000000, 51.6],
        [1453676400000, 51.6],
        [1453762800000, 51.6],
        [1453849200000, 51.6],
        [1453935600000, 51.6],
        [1454022000000, 51.6]
      ]
    },

    {
      type: 'scatter',
      name: 'Index Models Two',
      identifier: 'tt',
      method: 'Index models',
      color: colors[1],
      data: [
        [1451862000000, 50.1],
        [1451948400000, 50.1],
        [1452034800000, 50.1],
        [1452121200000, 50.1],
        [1452207600000, 50.1],
        [1452294000000, 50.1],
        [1452380400000, 50.1],
        [1452466800000, 50.1],
        [1452553200000, 50.1],
        [1452639600000, 50.1],
        [1452726000000, 50.1],
        [1452812400000, 48.4],
        [1452898800000, 48.4],
        [1452985200000, 48.4],
        [1453071600000, 48.4],
        [1453158000000, 48.4],
        [1453244400000, 48.4],
        [1453330800000, 48.4],
        [1453417200000, 48.4],
        [1453503600000, 48.4],
        [1453590000000, 48.4],
        [1453676400000, 48.4],
        [1453762800000, 48.4],
        [1453849200000, 48.4],
        [1453935600000, 48.4]
      ],
      marker: {
        radius: 5,
        symbol: 'circle'
      }

    }
  ]


});