帶有負面和正面數據的Highcharts條形圖

我正在研究顯示條形圖的腳本。我有這個工作在一定程度上。帶有負面和正面數據的Highcharts條形圖

我所要做的是在左側和右側的負值正值在圖表中顯示的MySQL查詢的結果。表中的結果值是「1」或「2」。

到目前爲止的代碼是：

$(function() { 

var data =[<?php 


mysql_select_db($database_test, $con); 
$query_result = sprintf("SELECT COUNT(Condition), ConditionValue AS RC1 FROM FeedBack WHERE ConditionValue = 1 AND FeedBackDate BETWEEN '" . date("Y-m-d", strtotime($_POST['FromDate'])) . "' AND '". date("Y-m-d", strtotime($_POST['ToDate'])) . "'"); 
$result = mysql_query($query_result, $con) or die(mysql_error()); 
$totalRows_result_rc = mysql_num_rows($result); 



while ($row_result = mysql_fetch_assoc($result)){ 
?> 


[<?php echo $row_result['RC1'];?>] 

<?php 
} 
?> 
] 
$('#container1').highcharts({ 
    chart: { 
    type: 'bar' 
    }, 
title: { 
    text: 'Condition' 
}, 
subtitle: { 
    text: '' 
}, 

legend: { 
    layout: 'vertical', 
    align: 'right', 
    verticalAlign: 'top', 
    x: -20, 
    y: 34, 
    floating: false, 
    borderWidth: 1, 
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
    shadow: true 
}, 

plotOptions: { 
    series: { 
     shadow:false, 
     borderWidth:0, 
     dataLabels:{ 
      enabled:true, 
      formatter: function() { 
       return this.y +'%'; 
      } 
     } 
    } 
}, 

xAxis:{ 
lineColor:'#999', 
lineWidth:1, 
tickColor:'#666', 
tickLength:3, 
    title:{ 
     text:'<?php print $totalRows_result_rc;?> records' 
    }, 
}, 

yAxis:{ 
lineColor:'#999', 
lineWidth:1, 
tickColor:'#666', 
tickWidth:1, 
tickLength:3, 
gridLineColor:'#ddd', 
    title:{ 
     text:'Between <?php print $_POST['FromDate'];?> and <?php print $_POST['ToDate'];?>', 
     rotation:0, 
     margin:50, 
}, 

labels: { 
    formatter: function() { 
     return (this.isLast ? this.value + '%' : this.value); 
    } 
} 
}, 
series: [{ 

color: '#CC0000', 
name: 'Conditione', 
data: data, 
maxPointWidth: 10, 
index:0, 
legendIndex:1, 
exporting: { 
    filename: 'Ccondition' 
} 

}] 
}); 
});

我已經在一些目前存在的方式寫這一點，但不是能getthe所需的結果。

任何人都可以指出我在哪裏銅鑼錯了。非常感謝您花時間提供幫助。

來源

2015-09-04 DCJones

那麼，什麼是不工作？默認情況下，使用條形圖時，負值將在左側，正值在右側。是否有更具體的，或不同於你想要的默認行爲？ – jlbriggs

另外，你說的值是1或2.你的意思是他們也可以是-1和-2？ – jlbriggs

這可以通過使用兩個系列完成：一個包含了消極和一個包含正值。他們應該（但不要求根據您的需要）共享相同的xAxis值。在highchart網站上看看這個example。注意使用的兩個系列：

series: [{ 
     name: 'Male', 
     data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2, 
      -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4, 
      -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0] 
    }, { 
     name: 'Female', 
     data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9, 
      3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9, 
      1.8, 1.2, 0.6, 0.1, 0.0] 
    }]

而被鏈接到同一類別：

var categories = ['0-4', '5-9', '10-14', '15-19', 
     '20-24', '25-29', '30-34', '35-39', '40-44', 
     '45-49', '50-54', '55-59', '60-64', '65-69', 
     '70-74', '75-79', '80-84', '85-89', '90-94', 
     '95-99', '100 + '];

他們在這裏做了一些格式使得負值被標爲正和其他一些Y軸標籤更改。

來源

2015-09-04 12:22:03 wergeld

非常感謝。這有很大幫助。 – DCJones

帶有負面和正面數據的Highcharts條形圖

回答

相關問題