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

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

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

$(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
        });
    });

});

});

JSON包含三（3）个部分：月份、月份总数和目标。我试图做的是以折线图的形式显示每个月的数据。 这是我的工作，但我想显示目标数据作为一条线在同一图表上

如何获取目标显示的数据

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

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

$(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
        });
    });

});

});

$（函数（）{
var类别=[]；
VarData2=[]；
var targetValue=null；
var图；
$（文档）.ready（函数（）{
$.getJSON（“../charts/imaint\u audit\u monthly\u chart.php”），函数（json）{
$.each（json，函数（i，el）{
如果（el.name=“月”）{
类别=el数据；
}else if（el.name==“目标”）{
targetValue=高程数据[0]；
}否则{
数据2.推送（el）；
}
});
$（“#container1”）。高图({
图表：{
renderTo:'容器'，
键入：“行”，
玛金托普：40，
marginRight:30，
marginBottom:50，
plotBackgroundColor:“#FCFFC5”
},
标题：{
正文：“月度审计”，
x:-20，//中心
风格：{
fontFamily：“塔荷马”，
颜色：'#000000'，
fontWeight:'粗体'，
字体大小：“10px”
}
},
副标题:{
文本：“”，
x:-20
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
亚克斯：{
showFirstLabel:false，
线条颜色：'#999'，
线宽：1，
勾选颜色：'#666'，
宽度：1，
长度：2，
时间间隔：10，
gridLineColor:“#ddd”，
标题：{
文本：“”，
风格：{
fontFamily：“塔荷马”，
颜色：'#000000'，
fontWeight:'粗体'，
字体大小：“10px”
}
},
绘图线：[{
颜色：“#FF0000”，
价值：targetValue，
标签：{
文本：“目标”，
风格：{
颜色：“#FF0000”
}
}
}]
},
图例：{
启用：false，
项目样式：{
字体：“11px投石机MS，Verdana，无衬线”，
颜色：'#000000'
},
项目悬停样式：{
颜色：'#000000'
},
itemHiddenStyle：{
颜色：“#444”
}
},
打印选项：{
专栏：{
颜色：“#ff00ff”
},
系列：{
数据标签：{
启用：对，
颜色：'#000000'，
对齐：'居中'，
y:0，
风格：{
fontSize:'10px'，
fontFamily:“Verdana，无衬线”
}
}
}
},
学分：{
已启用：false
},
系列：数据2
});
});
});
});

---

非常感谢您的时间。

我建议您使用“绘图线”功能来显示目标值。这将向任何轴添加一条线，并且您的需求似乎是使用打印线的最佳示例。首先，您必须更新代码以处理从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创建新的绘图线：

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

这将在指定的

targetValue

处添加一条红线，其左侧附有红色标签“Target”，如本例所示：

---

我建议您使用“绘图线”功能来显示目标值。这将向任何轴添加一条线，并且您的需求似乎是使用打印线的最佳示例。首先，您必须更新代码以处理从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创建新的绘图线：

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

这将在指定的

targetValue

处添加一条红线，其左侧附有红色标签“Target”，如本例所示：

---

如果你有一个点需要显示总数，那么一条线连接两个点……我建议你将其显示为标签，而不是单独的折线图。嗨，Nishith，我想显示的是每月数据，并在图表上画一条格子线，以显示当月的目标是否已达到。这就是我想显示目标数据的原因。这是可能的？一条线连接两个点，如果你有一个点需要显示总数……我建议你将其显示为标签，而不是单独的折线图。嗨，Nishith，我想显示的是每月数据，并在图表中显示一条格子线，以显示当月目标是否已达到。这就是我想显示目标数据的原因。这是可能的吗？嗨，马丁，我已经编辑了我的代码，但没有红线，你知道为什么吗。编辑后的代码在原始帖子的上面。再次感谢您的时间。请确保在Ajax回调后将

targetValue

实际设置为任何值。您还可以尝试先将其设置为固定值，以查看是否显示它。然后检查它是否由getJSON-method更新。Hi Martin，我设置var targetValue=200；没有欢乐，就没有红线。我检查了JSON的内容，数据就在那里：对象名：“Target”，数据：Array 0:153。因为测试153是我所期望的。你还有别的想法吗。再次感谢您的时间。您是否尝试在highcharts配置中硬编码该值？如果是，你看到那条线了吗