Question

我想在highcharts中创建类似的图表： IOT Central Chart

这是我到现在所得到的：

＆＃13;

Highcharts.setOptions({
 colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

// Get the data. The contents of the data file can be viewed at
$.getJSON(
  'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
  function (activity) {
    $.each(activity.datasets, function (i, dataset) {

      // Add X values
      dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
        return [activity.xData[j], val];
      });

      $('<div class="chart">')
        .appendTo('#container')
        .highcharts({
          chart: {
            type: "spline", 
            marginLeft: 40, // Keep all charts left aligned
            marginTop: 7,
            marginBottom: 7
          },
          title: {
            text: null,
          },
          credits: {
            enabled: false
          },
          legend: {
            enabled: false
          },
          xAxis: {
            visible: false,
            labels: {
              format: '{value} km'
            }
          },
          yAxis: {
            visible: true,
            title: {
              text: null
            },
            tickAmount: 2,
            minPadding: 0,
            lineWidth:1,
            gridLineColor: "transparent"
          },
          series: [{
            data: dataset.data,
            name: dataset.name,
            color: Highcharts.getOptions().colors[i],
            fillOpacity: 0.3,
            tooltip: {
              valueSuffix: ' ' + dataset.unit
            }
          }]
        });
    });
  }
);

＆＃13;

.chart {
    min-width: 320px;
    max-width: 800px;
    height: 150px;
    margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

＆＃13;

但问题是我无法导出或缩放这个图表的正常图例。

Answer 1

这里的问题是你创建了三个单独的图表而不是一个。

Highstock 允许您定位和调整轴（height＆amp; top属性）：

  yAxis: [{
    height: '50%'
  }, {
    top: '50%',
    height: '50%'
  }],

API参考：

事实上，它也会在 Highcharts 中工作（即使它没有记录）。

现场演示： http://jsfiddle.net/BlackLabel/gb3jhq75/

Highchart多Yaxis在一行

1 个答案: