Блог

Главная - Вопросы по программированию - разделительная линия добавляет пробел перед `0` по оси y и оси x

разделительная линия добавляет пробел перед `0` по оси y и оси x

#jquery #kendo-ui #kendo-chart

#jquery #kendo-пользовательский интерфейс #кендо-диаграмма #диаграмма кендо

Вопрос:

Я использую диаграмму кендо для отображения точечной диаграммы. Большая часть данных находится на нулевых уровнях, и это становится почти скрытым в линии оси x.

Есть ли возможность сделать больше места перед 0 на оси y и оси x? т. е. если есть возможность сделать 0 начало с небольшого расстояния по оси y и немного прямо по оси x ?

введите описание изображения здесь

Я хотел добиться чего-то подобного, что показано на рисунке 2: возможно ли это достичь в пользовательском интерфейсе Kendo?

введите описание изображения здесь

 <!DOCTYPE html>
<html>

<head>
  <base href="https://demos.telerik.com/kendo-ui/scatter-charts/index">
  <style>
    html {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default.mobile.min.css" />

  <script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>


  <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>



</head>

<body>
  <div id="example">
    <div class="demo-section k-content wide">
      <div id="chart"></div>
    </div>
    <script>
      function createChart() {
        $("#chart").kendoChart({
          title: {
            text: "Rainfall - Wind Speed"
          },
          legend: {
            position: "bottom"
          },
          seriesDefaults: {
            type: "scatter"
          },
          series: [{
            name: "January 2008",
            data: [
              [655, 132],
              [158, 56],
              [212, 159],
              [84, 0],
              [175, 55],
              [122, 2],
              [168, 237],
              [160, 106],
              [223, 28],
              [151, 169],
              [142, 57],
              [104, 0],
              [155, 0],
              [138, 0],
              [258, 23],
              [402, 211],
              [470, 149],
              [331, 38],
              [96, 5],
              [190, 0],
              [168, 92],
              [110, 39],
              [184, 0],
              [153, 0],
              [168, 9],
              [170, 0],
              [369, 121],
              [171, 69],
              [251, 155],
              [287, 121],
              [468, 8],
              [242, 90],
              [357, 470],
              [97, 0],
              [144, 108],
              [187, 0],
              [142, 43],
              [134, 0],
              [108, 0],
              [147, 68],
              [141, 0],
              [171, 5],
              [321, 94],
              [156, 6],
              [172, 29],
              [123, 0],
              [155, 45],
              [80, 39],
              [249, 0],
              [179, 0],
              [131, 65],
              [155, 1],
              [149, 12],
              [98, 0],
              [78, 0],
              [151, 0],
              [119, 0],
              [161, 0],
              [130, 0],
              [190, 1],
              [222, 0],
              [179, 0],
              [197, 0],
              [418, 165],
              [108, 0],
              [139, 1],
              [150, 0],
              [138, 0],
              [133, 0],
              [172, 11],
              [140, 49],
              [217, 0],
              [214, 30],
              [195, 29],
              [182, 18],
              [251, 164],
              [371, 239],
              [84, 33],
              [121, 86],
              [175, 0],
              [282, 9],
              [139, 73],
              [95, 0],
              [126, 23],
              [169, 9],
              [193, 28],
              [332, 66],
              [250, 157],
              [156, 15],
              [161, 5],
              [461, 57],
              [186, 104],
              [234, 64],
              [200, 88],
              [533, 53],
              [193, 49],
              [204, 0],
              [375, 120],
              [385, 142],
              [272, 0],
              [77, 3],
              [120, 0],
              [209, 2],
              [127, 17],
              [196, 63],
              [74, 59],
              [327, 255],
              [424, 327]
            ]

          }],
          xAxis: {
            max: 1000,
            title: {
              text: "Wind Speed [km/h]"
            },
            crosshair: {
              visible: true,
              tooltip: {
                visible: true,
                format: "n1"
              }
            }
          },
          yAxis: {
            min: 0,
            max: 500,
            title: {
              text: "Rainfall [mm]"
            },
            axisCrossingValue: -5,
            crosshair: {
              visible: true,
              tooltip: {
                visible: true,
                format: "n1"
              }
            }
          }
        });
      }

      $(document).ready(createChart);
      $(document).bind("kendo:skinChange", createChart);
    </script>
  </div>




</body>

</html>

Комментарии:

1. Что-то вроде этого: dojo.telerik.com/@ezanker/itAJAnab

2. нет ли способа создать определенный промежуток между этим разбросом mark и линией оси x ? Таким образом, метка не перекрывает линию.

3. Вы могли бы использовать визуальное свойство маркеров для перемещения вверх по низким значениям и событийного изменения цвета нулевых значений: dojo.telerik.com/@ezanker/itAJAnab