Question

我正在使用一个使用HighCharts的脚本。我编写了脚本来生成并以JSON格式输出结果，见下文。

[{"name":"Month","data":["Jan","Feb","Mar","Apr","May"]},{"name":"Rooms","data":[140,77,76,1,1]},{"name":"Target","data":["155"]}]

JSON有三（3）个部分，月份，月份总数和目标。我想要做的是以折线图显示每个月的数据。这个我有用，但我想在同一个图表上将目标数据显示为一行。

如何获取要显示的目标数据。

我还编写了调用JSON数据的脚本，见下文。

$(function () {

var categories=[];
var data2 =[];
var targetValue = null;


var chart;
$(document).ready(function() {
    $.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) { 
    $.each(json,function(i,el) { 
      if (el.name == "Month") {
        categories = el.data; 
      } else if (el.name == "Target") {
        targetValue = el.data[0];
      } else {
        data2.push(el); 
      }
    });


    $('#container1').highcharts({
        chart: {
           renderTo: 'container',
           type: 'line',
           marginTop: 40,
       marginRight: 30,   
           marginBottom: 50,
       plotBackgroundColor: '#FCFFC5'
        },

title: {
        text: 'Monthly audits <?php echo $year;?>',
        x: -20, //center
    style: {
            fontFamily: 'Tahoma',
    color: '#000000',
            fontWeight: 'bold',
    fontSize: '10px'
        }
     },

     subtitle: {
         text: '',
         x: -20
     },

     xAxis: {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
     },

     yAxis: {

                showFirstLabel: false,
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickWidth:1,
                tickLength:2,
                tickInterval: 10,
                gridLineColor:'#ddd',
                title: {
                    text: '',
                    style: {
                fontFamily: 'Tahoma',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '10px'
                }
                },
                plotLines: [{
                    color: '#FF0000',
                    value: targetValue,
                    label: {
                        text: 'Target',
                        style: {
                            color: '#FF0000'
                        }
                    }
                }]
                },
    legend: {
    enabled: false,
        itemStyle: {
        font: '11px Trebuchet MS, Verdana, sans-serif',
        color: '#000000'
    },
          itemHoverStyle: {
             color: '#000000'
          },
          itemHiddenStyle: {
             color: '#444'
          }

    },

plotOptions: {
    column: {
            color:'#ff00ff'
    },

series: {
          dataLabels: {
          enabled: true,
          color: '#000000',
          align: 'center',
          y: 0, 
          style: {
             fontSize: '10px',
             fontFamily: 'Verdana, sans-serif'
          }
        }
      }
},

credits: {
        enabled: false
},

    series: data2
        });
    });

});

});

非常感谢你的时间。

Answer 1

我建议你应该使用'plotLine'-Feature来显示目标值。这会为您的任何轴添加一条线，似乎您的要求是使用绘图线的最佳示例。首先，您必须更新代码以处理从Web服务返回的JSON：

$(function () {

  var categories=[];
  var data2 =[];
  var targetValue = null;

  var chart;
  $(document).ready(function() {
      $.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) { 
        $.each(json,function(i,el) { 
          if (el.name == "Month") {
            categories = el.data; 
          } else if (el.name == "Target") {
            targetValue = el.data[0];
          } else {
            data2.push(el); 
          }
  });

  [...]

现在我们在变量targetValue中有目标值。现在，这将插入到highcharts配置中，为yAxis创建一个新的plotLine：

yAxis: {
  plotLines: [{
    color: '#FF0000',
    value: targetValue,
    label: {
      text: 'Target',
      style: {
        color: '#FF0000'
      }
    }
  }],
  minRange: targetValue,  // to ensure the plotLine is always visible
  [...]
},

这将在指定的targetValue处添加一条红线，其左侧附有红色标签“Target”，如下例所示：

https://jsfiddle.net/doc_snyder/2spmxtwa/1/

Highcharts，在同一折线图上显示两组数据

1 个答案: