当数据= 0时AmCharts不会绘制图

Question

[ 
{ "category": "Q12012", "value1": 31845935.15, "value3": 0.00 }, 
{ "category": "Q22012", "value1": 29674500.79, "value3": 0.00 }, 
{ "category": "Q32012", "value1": 30935441.96, "value3": 0.00 }, 
{ "category": "Q42012", "value1": 31748214.07, "value3": 0.00 }, 
{ "category": "Q12013", "value1": 36601910.60, "value3": 31051022.99 }, 
{ "category": "Q22013", "value1": 39663505.35, "value3": 32240016.86 }, 
{ "category": "Q32013", "value1": 39822373.03, "value3": 34737268.00 }, 
{ "category": "Q42013", "value1": 37821101.06, "value3": 36959000.76 }, 
{ "category": "Q12014", "value1": 47430411.67, "value3": 38477222.51 }, 
{ "category": "Q22014", "value1": 47493801.18, "value3": 41184347.78 }, 
{ "category": "Q32014", "value1": 0.00, "value3": 43141921.74 }
]

显示我的图表的图片是使用以下代码创建的。

1. 如果我的数据值= 0，如何显示？
2. 意味着如果我的data == 0.00 ，我不希望将其绘制在图表上。 我可以在哪里设置它们？
3. 如何命名线（橙色和黄色线），x轴和y轴？

谢谢

          <!-- the chart code -->
          <script>
        var chart;

        // create chart
        AmCharts.ready(function() {

          // load the data
          var chartData = AmCharts.loadJSON('dataMainForecasting.php');

          // SERIAL CHART
          chart = new AmCharts.AmSerialChart();
          chart.pathToImages = "http://www.amcharts.com/lib/images/";
          chart.dataProvider = chartData;
          chart.categoryField = "category";
          chart.title = 'Hello';

          //chart.dataDateFormat = "YYYY-MM-DD";

          // GRAPHS

          var graph1 = new AmCharts.AmGraph();
          graph1.valueField = "value1";
          graph1.bullet = "round";
          graph1.bulletBorderColor = "#FFFFFF";
          graph1.bulletBorderThickness = 2;
          graph1.lineThickness = 2;
          graph1.lineAlpha = 0.5;
          chart.addGraph(graph1);

          var graph2 = new AmCharts.AmGraph();
          graph2.valueField = "value2";
          graph2.bullet = "round";
          graph2.bulletBorderColor = "#FFFFFF";
          graph2.bulletBorderThickness = 2;
          graph2.lineThickness = 2;
          graph2.lineAlpha = 0.5;
          chart.addGraph(graph2);

          // CATEGORY AXIS
          chart.categoryAxis.parseString = true;

          // WRITE
          chart.write("Quarter2");
        });

        json = json.filter(function(val) {
    return val !== 0;
  });

  </script>

这是我提取的所有数据

    mysql_select_db("test",$connect);

// Fetch the data
$query = "
  SELECT *
  FROM `table 5` ";
$result = mysql_query( $query );

// All good?
if ( !$result ) {
  // Nope
  $message  = 'Invalid query: ' . mysql_error() . "\n";
  $message .= 'Whole query: ' . $query;
  die( $message );
}

// Print out rows

// Print out rows
$prefix = '';
echo "[\n";
while ( $row = mysql_fetch_assoc( $result ) ) {
  echo $prefix . " {\n";
  echo '  "category": "' . $row['category'] . '",' . "\n";
  echo '  "value1": ' . $row['value1'] . ',' . "\n";
  echo '  "value2": ' . $row['value2'] . '' . "\n";
  echo " }";
  $prefix = ",\n";
}
echo "\n]";

// Close the connection
//mysql_close($link);
?>

Answer 1

• 最新答案

检查AmChart addLabel方法

看到这个工作演示

我已经为以下两者添加了实现：1）从图形中删除零值，以及2）更改轴的标签。

JS

//function prototype
addLabel(x, y, text, align, size, color, rotation, alpha, bold, url)

哪里

x-水平坐标
y-垂直坐标
文字-标签的文字
align-对齐（左/右/中心）
大小-文字大小
颜色-文字颜色
旋转-旋转角度
alpha-标签alpha
粗体-指定文本是否为粗体（true / false）
url-一个的网址

• 这是我在更改原始问题之前的答案

您可以仅预处理要输入到图表API的数据，然后删除零值的数据。 这将很容易，而不是尝试修改图形API。

检查JSFiddle演示

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JS：

$(function() {
  var options = {
    chart: {
      renderTo: 'container',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: ''
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
      }
    },
    plotOptions: {
      line: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          color: '#000000',
          connectorColor: '#000000'
        }
      }
    },
    events: {
      load: function() {
        var theChart = this;
        var theSeries = this.series;
      }
    },
    series: [{
      type: 'line',
      name: 'Browser share'
    }]
  };

    //though this is a simple array, you will use a real json object here
  json = [11, 71.5, 0, 0, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

  json = json.filter(function(val) {
    return val !== 0;
  });

  options.series[0].data = json;
  $('#container').highcharts(options);

});

因此，基本上，您需要将代码更改为以下内容：

$.getJSON("dataHome.php", function(json) {

    //now you need to remove the zeros
    json = json.filter(function(val) {
      return val !== 0;
    });
    options.series[0].data = json;
    chart = new Highcharts.Chart(options);
  });

您可以使用其键从json对象中删除元素，请参见此链接