Question

我需要在工具提示上显示其他值：名称，计数和其他值（android）。我在Example中看到了这一点，我试图创建类似的但是我不能得到相同的

＆＃13;

while

＆＃13;

$(function() {
  var hour = 3600 * 1000;
  var options = {
    chart: {
      renderTo: 'container',
      type: 'line',
      options3d: {
        enabled: true,
        alpha: 0,
        beta: 0,
        depth: 0,
        viewDistance: 25
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },

    xAxis: {
      labels: {
        align: 'left',
        style: {
          color: '#423D3C',
          fontWeight: 'normal',
          fontFamily: 'Open Sans'
        }
      },
      showLastLabel: false,
      tickmarkPlacement: 'on',
      tickPosition: 'inside',
      tickWidth: 0,
      tickPixelInterval: 60,
      lineWidth: 2,
      lineColor: '#423D3C',
      maxPadding: 0,
      minPadding: 0,
      gridLineWidth: 0,
      offset: 0,
      startOnTick: true,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%H:%M'
      },

      endOnTick: true
    },
    yAxis: {
      tickPositioner: function() {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [0, halfMaxDeviation, maxDeviation];
      },
      title: {
        text: "user"
      }
    },
    tooltip: {
      backgroundColor: '#1B1A1A',
      borderColor: '#1B1A1A',
      crosshairs: true,
      shadow: false,
      style: {
        color: 'white',
        fontSize: '12px',
        padding: '8px'
      },
      enabled: true,
      crosshairs: false,
      shared: false,
      snap: 30,
      formatter: function() {
        var s = '<b>' + Highcharts.dateFormat('%H:%M',
          new Date(this.x)) + '</b>';

        $.each(this.points, function() {
          s += '<br/>' + this.series.name + ': ' +
            point.y + 'm' + '<br/>' + this.series.android + ': ' +
            this.series.android + 'm';
          console.log(this.series.android);
        });

        return s;
      },
      shared: true
    },
    plotOptions: {
      line: {
        //dashStyle: 'ShortDot',
        lineWidth: 2
      },
      series: {
        pointStart: 0 * hour,
        pointInterval: hour,
      },
      dataGrouping: {
        enabled: false
      },
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true
          }
        },
        symbol: 'circle'
      },
    },
    series: [],
  };
  $.getJSON('data.json', function(list) {
    var newseries;

    $.each(list, function(i, item) {
      newseries = {};
      newseries.name = item.name;
      newseries.data = item.data;
      newseries.android = item.android;
      options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

    console.log(options.series);

  });
});

＆＃13;

我的data.json有

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>


<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>

我的结果就像

我预期的工具提示

我需要工具提示中的值我不知道为什么它会导致未定义的值，但是在console.log中也有一个android的值，但是当我执行console.log（this.series.android）时，我的定义未定义对于android值。

对高级图表不熟悉任何帮助都会受到赞赏

提前致谢

Answer 1

此处modified_data是包含在工具提示中显示exta信息所需的其他数据的数据对象

  var newseries;
  $.each(jsond, function(i, item) {
    var modified_data = [];

    $.each(item.data, function(j) {
      modified_data.push({
        y: item.data[j],
        android: item.android[j]
      })
    })

    newseries = {};
    newseries.name = item.name;
    newseries.data = modified_data;
    //newseries.android = item.android;
    options.series.push(newseries);
  });

工具提示格式化程序

  formatter: function() {
    var s = '<b>' + Highcharts.dateFormat('%H:%M',
      new Date(this.x)) + '</b>';
    $.each(this.points, function() {
      //console.log(this)
      s += '<br/>' + this.series.name + ': ' +
        this.y + 'm' + '<br/>' + 'Android' + ': ' +
        this.point.android + 'm';
    });

    return s;
  },

Fiddle代码段

＆＃13;

$(function() {
  var hour = 3600 * 1000;
  var options = {
    chart: {
      renderTo: 'container',
      type: 'line',
      options3d: {
        enabled: true,
        alpha: 0,
        beta: 0,
        depth: 0,
        viewDistance: 25
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },

    xAxis: {
      labels: {
        align: 'left',
        style: {
          color: '#423D3C',
          fontWeight: 'normal',
          fontFamily: 'Open Sans'
        }
      },
      showLastLabel: false,
      tickmarkPlacement: 'on',
      tickPosition: 'inside',
      tickWidth: 0,
      tickPixelInterval: 60,
      lineWidth: 2,
      lineColor: '#423D3C',
      maxPadding: 0,
      minPadding: 0,
      gridLineWidth: 0,
      offset: 0,
      startOnTick: true,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%H:%M'
      },

      endOnTick: true
    },
    yAxis: {
      tickPositioner: function() {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [0, halfMaxDeviation, maxDeviation];
      },
      title: {
        text: "user"
      }
    },
    tooltip: {
      backgroundColor: '#1B1A1A',
      borderColor: '#1B1A1A',
      crosshairs: true,
      shadow: false,
      style: {
        color: 'white',
        fontSize: '12px',
        padding: '8px'
      },
      enabled: true,
      crosshairs: false,
      shared: false,
      snap: 30,
      formatter: function() {
        var s = '<b>' + Highcharts.dateFormat('%H:%M',
          new Date(this.x)) + '</b>';
        $.each(this.points, function() {
          //console.log(this)
          s += '<br/>' + this.series.name + ': ' +
            this.y + 'm' + '<br/>' + 'Android' + ': ' +
            this.point.android + 'm';
        });

        return s;
      },
      shared: true
    },
    plotOptions: {
      line: {
        //dashStyle: 'ShortDot',
        lineWidth: 2
      },
      series: {
        pointStart: 0 * hour,
        pointInterval: hour,
      },
      dataGrouping: {
        enabled: false
      },
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true
          }
        },
        symbol: 'circle'
      },
    },
    series: [],
  };

  var jsond = [{
    "name": "Today",
    "data": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
      46, 0, 0, 0, 0, 0
    ],
    "android": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0,
      0, 0, 0, 0, 20, 21
    ]
  }, {
    "name": "Yesterday",
    "data": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
      48, 0, 38, 30
    ],
    "android": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
      46, 0, 0, 0, 0, 0
    ]
  }, {
    "name": "Week_ago",
    "data": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0,
      0, 0, 0, 20, 21
    ],
    "android": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
      48, 0, 38, 30
    ]
  }]

  //$.getJSON('data.json', function(list) {
  var newseries;

  $.each(jsond, function(i, item) {
    var modified_data = [];

    $.each(item.data, function(j) {
      modified_data.push({
        y: item.data[j],
        android: item.android[j]
      })
    })



    newseries = {};
    newseries.name = item.name;
    newseries.data = modified_data;
    //newseries.android = item.android;
    options.series.push(newseries);
  });
  var chart = new Highcharts.Chart(options);

  //console.log(  options.series);
});
//});
/*
  
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>

＆＃13;

Answer 2

这是product_id ProductName quantity price userName ----------- --------------------- ----------- ----------- ----------------------------------------------- 1 Product A 3 450 Danny 2 Product B NULL 200 NULL 3 Product C NULL 250 NULL 4 Product D NULL 300 NULL (4 rows affected)文件的问题。 Check the highcharts documentation。以文档中提到的格式更改您的值。例如：

data.json

并根据此更改工具提示格式化程序功能。

如何将值传递给工具提示，而不是在highcharts中的x和y轴

2 个答案: