个人中心
gpt4 book ai didi

javascript - Dojo Chart X 轴名称的命名标签问题

转载 作者：行者123 更新时间：2023-11-28 01:17:29 25 4
gpt4 key购买 nike

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

这是我的代码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>

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

最佳答案

向 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
});

不确定数据库部分

关于javascript - Dojo Chart X 轴名称的命名标签问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23671528/

25 4 0
文章推荐： javascript - 点击切换开关
文章推荐： javascript - 如何在粘贴到可编辑 div 时从文本中删除样式
文章推荐： javascript - jQuery 查找具有特定类型的下一个元素的元素
文章推荐： c++ - 在调用 main() 之前处理需要互斥锁的 C++ 初始化和多线程感知函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com