如何在PHP

Question

我正在尝试用amchart绘制折线图，​​根据amchart文档来绘制每小时线图，这是正确的：   1.“日期”：“ 2012-01-01 01”   2. chart.dataDateFormat =“ YYYY-MM-DD HH”;   3. chart.categoryField =“ date”;

我也照着做，但是x轴没有改变。enter image description here

var lineChartData = [
        {
            "date": "2012-01-01 01",
            "negative": 80,
            "neutral": 40,
            "postitive": 60
        },
        {
            "date": "2012-02-01 02",
            "negative": 72,
            "neutral": 20,
            "postitive": 50
        },

    ];


    AmCharts.ready(function () {
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = lineChartData;
        chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
        chart.categoryField = "date";
        chart.dataDateFormat = "YYYY-MM-DD HH";



        // sometimes we need to set margins manually
        // autoMargins should be set to false in order chart to use custom margin values
        chart.autoMargins = false;
        chart.marginRight = 0;
        chart.marginLeft = 30;
        chart.marginBottom = 30;
        chart.marginTop = 40;

        // AXES
        // category                
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
        categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
        categoryAxis.inside = false;
        categoryAxis.gridAlpha = 0;
        categoryAxis.tickLength = 0;
        categoryAxis.axisAlpha = 0.5;
        categoryAxis.fontSize = 9;
        categoryAxis.axisColor = "rgba(255,255,255,0.8)";
        categoryAxis.color = "rgba(255,255,255,0.8)";


        // value
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.dashLength = 2;
        valueAxis.gridColor = "rgba(255,255,255,0.8)";
        valueAxis.gridAlpha = 0.2;
        valueAxis.axisColor = "rgba(255,255,255,0.8)";
        valueAxis.color = "rgba(255,255,255,0.8)";
        valueAxis.axisAlpha = 0.5;
        valueAxis.fontSize = 9;
        chart.addValueAxis(valueAxis);

        // members
        var graph = new AmCharts.AmGraph();
        graph.type = "smoothedLine";
        graph.valueField = "negative";
        graph.lineColor = "#53d769";
        graph.lineThickness = 3;
        graph.bullet = "round";
        //graph.bulletColor = "rgba(0,0,0,0.3)";
        graph.bulletBorderColor = "#53d769";
        graph.bulletBorderAlpha = 1;
        graph.bulletBorderThickness = 3;
        graph.bulletSize = 6;
        chart.addGraph(graph);

        // orders
        var graph1 = new AmCharts.AmGraph();
        graph1.type = "smoothedLine";
        graph1.valueField = "neutral";
        graph1.lineColor = "#1c7dfa";
        graph1.lineThickness = 3;
        graph1.bullet = "round";
        //graph1.bulletColor = "rgba(0,0,0,0.3)";
        graph1.bulletBorderColor = "#1c7dfa";
        graph1.bulletBorderAlpha = 1;
        graph1.bulletBorderThickness = 3;
        graph1.bulletSize = 6;
        chart.addGraph(graph1);

         // orders
        var graph2 = new AmCharts.AmGraph();
        graph2.type = "smoothedLine";
        graph2.valueField = "postitive";
        graph2.lineColor = "#821908";
        graph2.lineThickness = 3;
        graph2.bullet = "round";
        //graph1.bulletColor = "rgba(0,0,0,0.3)";
        graph2.bulletBorderColor = "#821908";
        graph2.bulletBorderAlpha = 1;
        graph2.bulletBorderThickness = 3;
        graph2.bulletSize = 6;
        chart.addGraph(graph2);


        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chart.addChartCursor(chartCursor);
        chartCursor.categoryBalloonAlpha = 0.2;
        chartCursor.cursorAlpha = 0.2;
        chartCursor.cursorColor = 'rgba(255,255,255,.8)';
        chartCursor.categoryBalloonEnabled = false;

        // WRITE
        chart.write("chartdiv");

    });

Answer 1

您拥有的样本数据不是每小时，而是每月（加上一个小时，但是在amCharts中，无论如何都是每月）。

AmCharts根据类别轴minPeriod和可见点之间的当前缩放级别/时间差，确定一个合适的时间段来显示基于日期的数据。假设您的数据相隔一个月以上，它将使用次高的时段格式来容纳可见的时段格式。此格式在类别轴的dateFormats数组中定义，该数组设置为：

 [{
    "period": "fff",
    "format": "JJ:NN:SS"
  }, {
    "period": "ss",
    "format": "JJ:NN:SS"
  }, {
    "period": "mm",
    "format": "JJ:NN"
  }, {
    "period": "hh",
    "format": "JJ:NN"
  }, {
    "period": "DD",
    "format": "MMM DD"
  }, {
    "period": "WW",
    "format": "MMM DD"
  }, {
    "period": "MM",
    "format": "MMM DD"
  }, {
    "period": "YYYY",
    "format": "YYYY"
  }]

调整MM，WW和DD以在输出中包括小时数将为您提供所需的标签，但是由于设置了时段，amCharts会将每个小时解释为午夜，因此您还需要将equalSpacing设置为为true以获取每个点的确切小时。

var lineChartData = [{
    "date": "2012-01-01 01",
    "negative": 80,
    "neutral": 40,
    "postitive": 60
  },
  {
    "date": "2012-02-01 02",
    "negative": 72,
    "neutral": 20,
    "postitive": 50
  },

];


AmCharts.ready(function() {
  var chart = new AmCharts.AmSerialChart();
  chart.dataProvider = lineChartData;
  chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
  chart.categoryField = "date";
  chart.dataDateFormat = "YYYY-MM-DD HH";



  // sometimes we need to set margins manually
  // autoMargins should be set to false in order chart to use custom margin values
  chart.autoMargins = false;
  chart.marginRight = 0;
  chart.marginLeft = 30;
  chart.marginBottom = 30;
  chart.marginTop = 40;

  // AXES
  // category                
  var categoryAxis = chart.categoryAxis;
  categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
  categoryAxis.equalSpacing = true;
  categoryAxis.inside = false;
  categoryAxis.gridAlpha = 0;
  categoryAxis.tickLength = 0;
  categoryAxis.axisAlpha = 0.5;
  categoryAxis.fontSize = 9;
  categoryAxis.axisColor = "rgba(255,255,255,0.8)";
  categoryAxis.color = "rgba(255,255,255,0.8)";
  categoryAxis.dateFormats = [{
    "period": "fff",
    "format": "JJ:NN:SS"
  }, {
    "period": "ss",
    "format": "JJ:NN:SS"
  }, {
    "period": "mm",
    "format": "JJ:NN"
  }, {
    "period": "hh",
    "format": "JJ:NN"
  }, {
    "period": "DD",
    "format": "MMM DD\nHH:NN"
  }, {
    "period": "WW",
    "format": "MMM DD\nHH:NN"
  }, {
    "period": "MM",
    "format": "MMM DD\nHH:NN"
  }, {
    "period": "YYYY",
    "format": "YYYY"
  }];


  // value
  var valueAxis = new AmCharts.ValueAxis();
  valueAxis.dashLength = 2;
  valueAxis.gridColor = "rgba(255,255,255,0.8)";
  valueAxis.gridAlpha = 0.2;
  valueAxis.axisColor = "rgba(255,255,255,0.8)";
  valueAxis.color = "rgba(255,255,255,0.8)";
  valueAxis.axisAlpha = 0.5;
  valueAxis.fontSize = 9;
  chart.addValueAxis(valueAxis);

  // members
  var graph = new AmCharts.AmGraph();
  graph.type = "smoothedLine";
  graph.valueField = "negative";
  graph.lineColor = "#53d769";
  graph.lineThickness = 3;
  graph.bullet = "round";
  //graph.bulletColor = "rgba(0,0,0,0.3)";
  graph.bulletBorderColor = "#53d769";
  graph.bulletBorderAlpha = 1;
  graph.bulletBorderThickness = 3;
  graph.bulletSize = 6;
  chart.addGraph(graph);

  // orders
  var graph1 = new AmCharts.AmGraph();
  graph1.type = "smoothedLine";
  graph1.valueField = "neutral";
  graph1.lineColor = "#1c7dfa";
  graph1.lineThickness = 3;
  graph1.bullet = "round";
  //graph1.bulletColor = "rgba(0,0,0,0.3)";
  graph1.bulletBorderColor = "#1c7dfa";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 3;
  graph1.bulletSize = 6;
  chart.addGraph(graph1);

  // orders
  var graph2 = new AmCharts.AmGraph();
  graph2.type = "smoothedLine";
  graph2.valueField = "postitive";
  graph2.lineColor = "#821908";
  graph2.lineThickness = 3;
  graph2.bullet = "round";
  //graph1.bulletColor = "rgba(0,0,0,0.3)";
  graph2.bulletBorderColor = "#821908";
  graph2.bulletBorderAlpha = 1;
  graph2.bulletBorderThickness = 3;
  graph2.bulletSize = 6;
  chart.addGraph(graph2);


  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chart.addChartCursor(chartCursor);
  chartCursor.categoryBalloonAlpha = 0.2;
  chartCursor.cursorAlpha = 0.2;
  chartCursor.cursorColor = 'rgba(255,255,255,.8)';
  chartCursor.categoryBalloonEnabled = false;

  // WRITE
  chart.write("chartdiv");

});

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 275px; background: #0c0c0c;"></div>