canvasjs x轴标签在组合图表中显示y轴索引

Question

我正在使用 Canvasjs 组合图表类型来显示 2 个 y 轴值与单个 x 轴值（时间）的对比。但正如您在图像中看到的，x 轴标签在特定情况下显示 y 轴的索引标签。

如果您看到，图表中显示的不是 10:00 AM，而是 "Gold Coast"。

我尝试像下面这样设置 x 轴的间隔，但对我没有任何效果。

axisX: {
    //interval: 1,
    intervalType: "hour",
    //valueFormatString: "DD MMM YYYY HH:mm:ss"
},

可能是什么问题，有什么解决办法吗？

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var location_datapoints = [
 { x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical", label: "Gold Coast" },
 { x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical", label: "Gold Coast" }
];
var workrest_datapoints = [
 { x: new Date(2018, 10, 18, 10, 0), y: 2, label: "Work" },
 { x: new Date(2018, 10, 18, 11, 0), y: 1, label: "Rest" }
];
   //console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
 animationEnabled: true,
 exportEnabled: true,
 title:{
  text: "Driver Work Rest Data"
 },
 axisY:{ 
  title: "Work or Rest",
  includeZero: false,
  interval: 1,
  labelFormatter: function ( e ) {
   var ret;
   switch(e.value){
    case 1:
     ret = "Rest";
     break;
    case 2:
     ret = "Work";
     break;
    case 3:
     ret = "2-up";
     break;
    case 4:
     ret = "Location";
     break;
    case 5:
     ret = "Comments";
     break;
    case 6:
     ret = "Annotations"
     break;
    default:
     ret = '';
   }
            return ret;  
        }
 },
 axisX: {
   //interval: 1,
   intervalType: "hour",
   //valueFormatString: "DD MMM YYYY HH:mm:ss"
   },
 data: [
 
  {
   type: "bubble",
   //toolTipContent: "{label}",
   dataPoints: location_datapoints
  },
  
 ]
});

chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Answer 1

西迪克，

在 axisX 上显示的不是 indexLabel，而是在 dataPoint 中设置的标签。在这种情况下移除标签应该可以正常工作。

var location_datapoints = [
 { x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical" },
 { x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical" }
];
var workrest_datapoints = [
 { x: new Date(2018, 10, 18, 10, 0), y: 2, label: "Work" },
 { x: new Date(2018, 10, 18, 11, 0), y: 1, label: "Rest" }
];
   //console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
 animationEnabled: true,
 exportEnabled: true,
 title:{
  text: "Driver Work Rest Data"
 },
 axisY:{ 
  title: "Work or Rest",
  includeZero: false,
  interval: 1,
  labelFormatter: function ( e ) {
   var ret;
   switch(e.value){
    case 1:
     ret = "Rest";
     break;
    case 2:
     ret = "Work";
     break;
    case 3:
     ret = "2-up";
     break;
    case 4:
     ret = "Location";
     break;
    case 5:
     ret = "Comments";
     break;
    case 6:
     ret = "Annotations"
     break;
    default:
     ret = '';
   }
            return ret;  
        }
 },
 axisX: {
   //interval: 1,
   intervalType: "hour",
   //valueFormatString: "DD MMM YYYY HH:mm:ss"
   },
 data: [
 
  {
   type: "bubble",
   //toolTipContent: "{label}",
   dataPoints: location_datapoints
  },
  
 ]
});

chart.render();

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

`

Answer 2

我误解了'label'的概念。为了显示正确的工具提示内容，我使用了 'label' 但它的用法不同。我现在使用 'name' 来显示正确的工具提示内容。这不会造成任何麻烦，我希望这是正确的选择。

作为参考，我在此处的代码片段中添加了我的代码。

var location_datapoints = [
 { x: new Date(2018, 10, 18, 10, 0), y: 4, indexLabel: "Gold Coast", indexLabelOrientation: "vertical" },
 { x: new Date(2018, 10, 18, 11, 0), y: 4, indexLabel: "Mount Tambrine", indexLabelOrientation: "vertical" }
];
var workrest_datapoints = [
 { x: new Date(2018, 10, 18, 10, 10), y: 2, name: 'Work' },
 { x: new Date(2018, 10, 18, 11, 10), y: 1, name: 'Rest' }
];
window.onload = function () {
   //console.log(location_datapoints);
var chart = new CanvasJS.Chart("chartContainer", {
 animationEnabled: true,
 exportEnabled: true,
 title:{
  text: "Driver Work Rest Data"
 },
 axisY:{ 
  title: "Work or Rest",
  includeZero: false,
  interval: 1,
  labelFormatter: function ( e ) {
   var ret;
   switch(e.value){
    case 1:
     ret = "Rest";
     break;
    case 2:
     ret = "Work";
     break;
    case 3:
     ret = "2-up";
     break;
    case 4:
     ret = "Location";
     break;
    case 5:
     ret = "Comments";
     break;
    case 6:
     ret = "Annotations"
     break;
    default:
     ret = '';
   }
            return ret;  
        }
 },
 axisX: {
   //interval: 1,
   intervalType: "hour",
   //valueFormatString: "DD MMM YYYY HH:mm:ss"
   },
 data: [
 
  {
   type: "bubble",
   //toolTipContent: "{label}",
   dataPoints: location_datapoints
  },
  {
   type: "stepLine",
   toolTipContent: '{name}',
   dataPoints: workrest_datapoints
  }
  
 ]
});

chart.render();
}

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

canvasjs x轴标签在组合图表中显示y轴索引

canvasjs x-axis label shows y-axis index in combined chart

javascript

charts

canvasjs