angularjs - 图表中Y轴不一致 - Thinbug

图表中Y轴不一致

时间：2019-09-04 13:44:23

标签： angularjs zingchart

我有最近一个月的电压数据。图表y轴不一致。可能是什么问题？ Chart image

1 个答案:

答案 0 :(得分：0)

提交请求

将来，我们建议向您的问题添加图表JSON，以便我们为您的解决方案创建演示。您可以阅读有关gettin your chart JSON here的更多信息。

解决方案

您有series个值作为字符串输入。您可以做两件事。

将值设为数字和非字符串
将值保留为字符串，并在zingchart.QUOTEDVALUES = true方法之前添加zingchart.render。这告诉ZingChart您有意设置了字符串作为值。使用String值有很多好处和用例，因此默认设置是将其设置为false。

此处演示：https://app.zingsoft.com/demos/embed/OIJAJIA7

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    gui: {
      contextMenu: {
        button: {
          visible: false
        }
      }
    },
    globals: {
      shadow: false,
      fontFamily: 'Helvetica'
    },
    type: 'area',
    legend: {
      layout: 'x4',
      marker: {
        borderRadius: '50px',
        borderColor: 'transparent'
      },
      item: {
        fontColor: 'white'
      },
      backgroundColor: 'transparent',
      borderColor: 'transparent'
    },
    tooltip: {
      visible: false
    },
    plot: {
      aspect: 'spline',
      marker: {
        visible: false
      },
      lineWidth: '2px'
    },
    // values are strings
    series: [{
      text: 'Cell Two (V) Optimum 8V',
           backgroundColor1: '#77d9f8',
           values: ['0.286907020873', '0.300569259962', '0.300569259962', '0.286907020873','0.286957020873' ],
      backgroundColor2: '#272822',
      lineColor: '#40beeb',
      palette: 1
    }],
    backgroundColor: '#434343',
    scaleX: {
      transform: {
        type: 'date'
      },
      values: ['2019/08/05 10:27', '2019/08/05 10:42', '2019/08/05 10:55', '2019/08/05 10:58', '2019/08/05 11:01'],
      zooming: true,
      tick: {
        lineColor: 'white',
        lineWidth: '1px'
      },
      item: {
        fontColor: 'white'
      },
      guide: {
        visible: false
      },
      maxItems: 8,
      lineColor: 'white',
      lineWidth: '1px'
    },
    scaleY: {
      tick: {
        lineColor: 'white',
        lineWidth: '1px'
      },
      guide: {
        lineStyle: 'solid',
        lineColor: '#626262'
      },
      item: {
        visible: true,
        fontColor: 'white'
      },
      lineColor: 'white',
      lineWidth: '1px'
    },
    crosshairX: {
      scaleLabel: {
        backgroundColor: '#fff',
        fontColor: 'black'
      },
      plotLabel: {
        _text: 'Number of hits : %v',
        backgroundColor: '#434343',
        fontColor: '#FFF'
      }
    }
  };

  zingchart.QUOTEDVALUES = true;
  
  zingchart.render({
    id: 'myChart',
    width: '100%',
    height: '100%',
    data: chartConfig
  });
});

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    </div>
  </body>
</html>