Блог

Играем с anychart и реагируем. Используя только anychart, следуя руководствам и руководствам, мне удалось установить цвета области по своему усмотрению в обычном javascript. Но react использует некоторый тип конфигуратора json.

Я хочу преобразовать это:

 anychart.onDocumentReady(function () {

    // create a data set
    var data = anychart.data.set([
      ["January", 12000, 10000],
      ["February", 15000, 12000],
      ["March", 16000, 18000],
      ["April", 15000, 11000],
      ["May", 14000, 9000]
    ]);

    // map the data
    var seriesData_1 = data.mapAs({x: 0, value: 1});
    var seriesData_2 = data.mapAs({x: 0, value: 2});

    // create a chart
    var chart = anychart.area();

    // set the interactivity mode
    chart.interactivity().hoverMode("single");

    // create the first series, set the data and name
    var series1 = chart.area(seriesData_1);
    series1.name("2004");

    // configure the visual settings of the first series
    series1.normal().fill("#00cc99", 0.3);
    series1.hovered().fill("#00cc99", 0.1);
    series1.selected().fill("#00cc99", 0.5);
    series1.normal().stroke("#00cc99", 1, "10 5", "round");
    series1.hovered().stroke("#00cc99", 2, "10 5", "round");
    series1.selected().stroke("#00cc99", 4, "10 5", "round");

    // create the second series, set the data and name  
    var series2 = chart.area(seriesData_2);
    series2.name("2005");

    // configure the visual settings of the second series
    series2.normal().fill("#0066cc", 0.3);
    series2.hovered().fill("#0066cc", 0.1);
    series2.selected().fill("#0066cc", 0.5);
    series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.normal().stroke("#0066cc");
    series2.hovered().stroke("#0066cc", 2);
    series2.selected().stroke("#0066cc", 4);

    // set the chart title
    chart.title("Area Chart: Appearance");

    // set the titles of the axes
    chart.xAxis().title("Month");
    chart.yAxis().title("Sales, $");

    // set the container id
    chart.container("container");

    // initiate drawing the chart
    chart.draw();
});
  

в этот тип конфигурации react json

 const complexSettings = {
  width: 800,
  height: 600,
  type: 'column',
  data: "P1,5nP2,3nP3,6nP4,4",
  title: 'Column chart',
  yAxis: [1, {
    orientation: 'right',
    enabled: true,
    labels: {
      format: '{%Value}{decimalPoint:\,}',
      fontColor: 'red'
    }
  }],
  legend: {
    background: 'lightgreen 0.4',
    padding: 0
  },
  lineMarker: {
    value: 4.5
  }
};
  

Я перепробовал много разных конфигураций JSON, ни одна из них, похоже, не работает.

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

            var data_chart= [[1,2][3,4],[5,6]]
           var chart1_settings = {
                id: "Aera chart 1 ",
                width: "100%",
                background:'transparent',
                height: 600,
                type: 'area',
                data: data_chart.map( (i)=> {return {x: i[0], value: i[1]} } ),          
                label: {
                    text: '',
                    width: "100%",
                    height: "100%",
                    fontSize: '45px',
                    fontColor: "#fff",
                    hAlign: 'center',
                    vAlign: 'middle'
                },
                title: {
                    text: '',
                    fontColor: "#fff",
                    fontWeight: 'bold'
                 }
            };

<AnyChart {...chart1_settings}/>
  

По сути, я хочу изменить заполнение диаграммы области. Куда я должен добавить: fill: ‘red’!?

Конфигурация JSON не включает все возможные настройки. Для сложных настроек мы рекомендуем использовать подход экземпляра. Используя этот подход, вы получаете доступ ко всей библиотеке API и можете применять любые необходимые настройки. Вот так:

 // create a data set
    var data = anychart.data.set([
      ["January", 12000, 10000],
      ["February", 15000, 12000],
      ["March", 16000, 18000],
      ["April", 15000, 11000],
      ["May", 14000, 9000]
    ]);

    // map the data
    var seriesData_1 = data.mapAs({x: 0, value: 1});
    var seriesData_2 = data.mapAs({x: 0, value: 2});

    // create a chart
    var chart = anychart.area();

    // set the interactivity mode
    chart.interactivity().hoverMode("single");

    // create the first series, set the data and name
    var series1 = chart.area(seriesData_1);
    series1.name("2004");

    // configure the visual settings of the first series
    series1.normal().fill("#00cc99", 0.3);
    series1.hovered().fill("#00cc99", 0.1);
    series1.selected().fill("#00cc99", 0.5);
    series1.normal().stroke("#00cc99", 1, "10 5", "round");
    series1.hovered().stroke("#00cc99", 2, "10 5", "round");
    series1.selected().stroke("#00cc99", 4, "10 5", "round");

    // create the second series, set the data and name  
    var series2 = chart.area(seriesData_2);
    series2.name("2005");

    // configure the visual settings of the second series
    series2.normal().fill("#0066cc", 0.3);
    series2.hovered().fill("#0066cc", 0.1);
    series2.selected().fill("#0066cc", 0.5);
    series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.normal().stroke("#0066cc");
    series2.hovered().stroke("#0066cc", 2);
    series2.selected().stroke("#0066cc", 4);

    // set the titles of the axes
    chart.xAxis().title("Month");
    chart.yAxis().title("Sales, $");

ReactDOM.render(
  <AnyChart
    width={800}
    height={600}
    instance={chart}
    title="Area Chart: Appearance"
  />, document.getElementById('root'));