Dojo Chart 在 X 轴名称的命名标签中出现问题

Posted

技术标签:

【中文标题】Dojo Chart 在 X 轴名称的命名标签中出现问题【英文标题】:Dojo Chart issues in naming label of X-axis name 【发布时间】:2014-05-15 07:12:08 【问题描述】:

我是道场图表的新手。我正在尝试使用 dojo 创建堆积柱形图。我正在尝试使用 dojo chart.Chart 显示带有折线图的条形图。但这是我的问题是如何编写来自我的数据库的 x 轴标签名称。我想在 X 轴上命名每个条形的名称。我的实际值来自数据库。我从所有堆栈溢出建议、dojo 指南和其他人那里进行搜索,但我找不到任何合适的解决方案。所以我请求你帮我解决我的代码错误的地方。所以在这里我可以纠正我的未来。

这是我的代码index.php

   <?php
    include "connection.php";
   $array = array();
   $array1 = array();
   $array2 =array();
     $query1 = "SELECT name,rate1,rate2 FROM TEST";
    $result = mysql_query($query1) or die ('Could not find Projects');
    while ($rows = mysql_fetch_array($result))
    $array1[]=$rows['name'];
    $array1[]=$rows['rate1'];
    $array2[]=$rows['rate2'];
   


   print_r($array1);
   print_r (json_encode($array1,JSON_NUMERIC_CHECK));
   print_r (json_encode($array2,JSON_NUMERIC_CHECK));
   <html><head>
  <link rel="stylesheet" href="dijit/themes/tundra/tundra.css">

   <script>dojoConfig = parseOnLoad: true</script>
<script src='dojo/dojo.js'></script>

  <script type="text/javascript">
  require(["dojox/charting/Chart",
 //"dojox/charting/plot2d/Lines", 
  "dojox/charting/axis2d/Default", 
  "dojox/charting/plot2d/StackedColumns", 
  "dojox/charting/action2d/Tooltip", 
    "dojo/ready", 
    "dojox/charting/widget/SelectableLegend"],
   function(Chart, Default, StackedColumns, Tooltip, ready, SelectableLegend) 
   ready(function() 

    var chart1 = new Chart("chart1");

    chart1.addPlot("stackedColumnsPlot", 
        type: StackedColumns,
        lines: true,
        areas: true,
        markers: true,
        tension: "S"
    );
    chart1.addPlot("linesPlot", 
        type: Lines,
        markers: true,
        stroke: 
            width: 2
        ,
        tension: 2
    );

    chart1.addAxis("x");
    chart1.addAxis("y", 
        vertical: true
    );

    chart1.addSeries("Series 1", <?php echo json_encode($array1,JSON_NUMERIC_CHECK); ?>
        , 
        plot: "stackedColumnsPlot",
        stroke: 
            color: "blue"
        ,
        fill: "lightblue"
    );
    chart1.addSeries("Series 2", <?php echo json_encode($array2,JSON_NUMERIC_CHECK); ?>, 
        plot: "stackedColumnsPlot",
        stroke: 
            color: "green"
        ,
        fill: "lightgreen"
    );


    new Tooltip(chart1, "stackedColumnsPlot", 
        text: function(chartItem) 
            console.debug(chartItem);
            return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
        
    );

    chart1.render();

    new SelectableLegend(
        chart: chart1,
        horizontal: false
    , "chart1SelectableLegend");
        );
      );
        </script>

这是我为堆积柱形图编写的代码。所以建议我如何在来自我的数据库的图表中编写 x 轴的标签名称。

【问题讨论】:

深入挖掘您的代码。 JSON 是否从 PHP array_to_chart_json() 函数正确返回?您的浏览器控制台中是否有任何错误?如果您可以缩小导致问题的代码范围并确定它是 Dojo 还是 PHP 相关问题,将会容易得多。 @DimitriM 感谢您的回复。现在我用正确的方式更新了我的代码。现在我的图表是显示。但有一件事告诉我。我怎样才能写出我的 X 轴标签名称。它来自我的database $array1[]=$rows['name'];我需要在 X 轴上显示的名称。请帮助我 【参考方案1】:

给x轴加标签:

这里有几个例子:

为整个轴的一个标签使用标题属性。

chart.addAxis("x", 
   min: 0, max: 100,
   fontColor: "blue",
   vertical: true,
   fixLower: "major", fixUpper: "major",
   title: "X axis title",
   titleFont: "bold bold bold 12pt Arial,sans-serif",
   titleOrientation: "axis" 
);

对于 x 轴上每个刻度线上的标签:

var xAxisLabels = [text: "Today",value: 1,text: "-1",value: 2,text: "-2",value: 3,text: "-3",value: 4,text: "-4",value: 5,text: "-5",value: 6,text: "-6",value: 7,text: "WK-1",value: 8,text: "WK-2",value: 9,text: "WK-3",value: 10,text: "WK-4",value: 11];

chart.addAxis("x", 
 labels: xAxisLabels,
 fontColor: "blue",
     majorTicks:true,
 majorTickStep:1,
    minorTicks:false,
    max: 11
);

不确定数据库部分

【讨论】:

@GoinOff 请帮我解决这个问题链接[***.com/questions/23813291/…]

以上是关于Dojo Chart 在 X 轴名称的命名标签中出现问题的主要内容,如果未能解决你的问题,请参考以下文章

删除 chart.js 中的 x 轴标签/文本

Chart.js 轴标签字体大小

Chart.JS - 无法在 Y 轴标签之间添加边距/间距

如何在 Chart.js v2 中格式化 x 轴时间刻度值

ggplot折线图中的多行x轴标签

chart.js的X轴步长和X轴Labels旋转角度接口