时间戳

首页 > 解决方案 > Highcharts 散点图 - 将数据库中的系列添加为不同的颜色

javascript - Highcharts 散点图 - 将数据库中的系列添加为不同的颜色

问题描述

我正在尝试从具有两个系列的数据集构建一个 highcharts 散点图。第一个被称为“inperson”，应该用蓝色绘制，第二个系列被称为“other”，需要用红色绘制。我似乎无法让第二个系列出现在我的图表上。

这是我的代码：

var options = {
  chart: {
    renderTo: 'container',
    type: 'scatter',
    plotBorderWidth: 1,
    zoomType: 'xy'
  },
  legend: {
    enabled: false
  },

    tooltip: {
        formatter: function () {
            return  "<br/><br/> "  + "Date: " + this.x +   "<br/><br/> " + "Yr: "+ this.y + "<br/><br/>" + contact_notes[this.point.index];
  }},


  xAxis: {
        gridLineWidth: 0,
        type: 'datetime',
        dateTimeLabelFormats: {
           day: '%m/%d'    //ex- 01 Jan 2016
        }
    },
yAxis: {
        gridLineWidth: 0,
    },


  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{}],
};



  vardata={
  "chart_data": {
    "contact_date": [
      "01/01",
      "02/06",
      "04/03",
      "08/09",
      "10/11",
      "12/27"
    ],
    "other": [
      2019.0,
      2017.0,
      2018.0,
      2017.0,
      2018.0,
      2017.0
    ],
    "inperson": [
      2019.0,
      2018.0,
      2017.0,
      NaN,
      2019.0,
      2017.0,
    ],
    "contact_notes": [
      "AA",
      "BB",
      "CC",
      "DD",
      "EE",
      "FF",
    ]
  }
};


options.xAxis.categories = data['chart_data']['contact_date'];
options.series[0].data = data['chart_data']['in-person'];
options.series[0].name = 'in-person'
options.series[0].color = '#3232ff';

var contact_notes = data['chart_data']['contact_notes'];

var chart = new Highcharts.Chart(options);

chart.addSeries({name:'other', color:'#b20000', data: data['chart_data']['other']}, false);
chart.redraw();


Highcharts.chart('container', options);

最后几行（addSeries 和 redraw）似乎不起作用。关于如何修复的任何建议？

谢谢！

标签： javascripthighcharts

解决方案

代码的最后一行（Highcharts.chart构造函数方法） - 将图表重置为不添加系列的状态。

这是没有调用构造函数的工作JSFiddle 演示。

PS顺便说一句，您的代码中有两个拼写错误：vardata应该options.series[0].data = data['chart_data']['in-person'];访问['inperson']

推荐阅读